How to render SVG (#something)


#1

You can notice that the <use> does not work… But when I copy the same code on another page that is not rendered by ProseMirror, the <use> tag is rendered properly.

Code:

const todo_item = {
  attrs: {
    done: { default: false },
  },
  content: 'paragraph block*',
  toDOM(node) {
    const { done } = node.attrs;

    return ['label', {
      'data-type': 'todo_item',
      class: 'todo',
      'data-done': done.toString(),
    },
    // <input class="todo__state" type="checkbox" />
    ['input', { class: 'todo__state', type: 'checkbox', checked: 'true' }],
    ['svg', {
      xmlns: 'http://www.w3.org/2000/svg',
      'xmlns:xlink': 'http://www.w3.org/1999/xlink',
      viewBox: '0 0 200 25',
      class: 'todo__icon',
    },
    ['use', { 'xlink:href': '#todo__line', class: 'todo__line' }],
    ['use', { 'xlink:href': '#todo__box', class: 'todo__box' }],
    ['use', { 'xlink:href': '#todo__check', class: 'todo__check' }],
    ['use', { 'xlink:href': '#todo__circle', class: 'todo__circle' }],
    ],
    ['div', { class: 'todo__text' }, 0],
    ];
  },
  parseDOM: [{
    priority: 51, // Needs higher priority than other nodes that use a "li" tag
    tag: '[data-type="todo_item"]',
    getAttrs(dom) {
      return {
        done: dom.getAttribute('data-done') === 'true',
      };
    },
  }],
};

const todo_list = {
  group: 'block',
  content: 'todo_item+ | list_item+',
  toDOM(node) {
    return ['div', {
      'data-type': 'todo_list',
      class: 'todo-list',
    }, 0];
  },
  parseDOM: [{
    priority: 51, // Needs higher priority than other nodes that use a "ul" tag
    tag: '[data-type="todo_list"]',
  }],
};