Solution to Vue2-Editor/Quill paste from MS Word bullet list bug

[danielrjames]

This is not an issue, but a solution to the MS Word copy/paste bug for bullet lists.

Out of the box, Vue2-Editor (and Quill, TipTap, etc) will not correctly format unordered lists (bullet lists) pasted in from MS Word. When you paste a bullet list from MS Word, the Quill formatting does not recognize it as <ul><li></li></ul>. While researching, I came across this thread from a few years back.

While that solution works, there are a few tweaks that need to be made in order to make this work for Vue2-Editor. The following is a solution that works (I've omitted unnecessary config). Hope this helps.

    <template>
     <div>
        <vue-editor
          :editorOptions="options"
        ></vue-editor>
     </div>
    </template>

    <script>
    import Delta from 'quill-delta';
    import _ from 'lodash';

    export default {
      data() {
        return {
          options: {
            modules: {
              clipboard: {
                matchers: [
                  ['p.MsoListParagraphCxSpFirst', this.matchMsWordList],
                  ['p.MsoListParagraphCxSpMiddle', this.matchMsWordList],
                  ['p.MsoListParagraphCxSpLast', this.matchMsWordList]
                ]
              }
            }
          }
        };
      },
      methods: {
        matchMsWordList(node, delta) {
          console.log('doing something');
          // Clone the operations
          let ops = _.map(delta.ops, _.clone);

          // Trim the front of the first op to remove the bullet/number
          let first = _.first(ops);
          first.insert = first.insert.trimLeft();
          let firstMatch = first.insert.match(/^(\S+)\s+/);
          if (!firstMatch) return delta;
          first.insert = first.insert.substring(
            firstMatch[0].length,
            first.insert.length
          );

          // Trim the newline off the last op
          let last = _.last(ops);
          last.insert = last.insert.substring(0, last.insert.length - 1);

          // Determine the list type
          let prefix = firstMatch[1];
          let listType = prefix.match(/\S+\./) ? 'ordered' : 'bullet';

          // Determine the list indent
          let style = node.getAttribute('style').replace(/\n+/g, '');
          let levelMatch = style.match(/level(\d+)/);
          let indent = levelMatch ? levelMatch[1] - 1 : 0;

          // Add the list attribute
          ops.push({ insert: '\n', attributes: { list: listType, indent } });

          return new Delta(ops);
        },
      }
    };
    </script>

[darshakeyan]

This is not an issue, but a solution to the MS Word copy/paste bug for bullet lists.

Out of the box, Vue2-Editor (and Quill, TipTap, etc) will not correctly format unordered lists (bullet lists) pasted in from MS Word. When you paste a bullet list from MS Word, the Quill formatting does not recognize it as <ul><li></li></ul>. While researching, I came across this thread from a few years back.

While that solution works, there are a few tweaks that need to be made in order to make this work for Vue2-Editor. The following is a solution that works (I've omitted unnecessary config). Hope this helps.

    <template>
     <div>
        <vue-editor
          :editorOptions="options"
        ></vue-editor>
     </div>
    </template>

    <script>
    import Delta from 'quill-delta';
    import _ from 'lodash';

    export default {
      data() {
        return {
          options: {
            modules: {
              clipboard: {
                matchers: [
                  ['p.MsoListParagraphCxSpFirst', this.matchMsWordList],
                  ['p.MsoListParagraphCxSpMiddle', this.matchMsWordList],
                  ['p.MsoListParagraphCxSpLast', this.matchMsWordList]
                ]
              }
            }
          }
        };
      },
      methods: {
        matchMsWordList(node, delta) {
          console.log('doing something');
          // Clone the operations
          let ops = _.map(delta.ops, _.clone);

          // Trim the front of the first op to remove the bullet/number
          let first = _.first(ops);
          first.insert = first.insert.trimLeft();
          let firstMatch = first.insert.match(/^(\S+)\s+/);
          if (!firstMatch) return delta;
          first.insert = first.insert.substring(
            firstMatch[0].length,
            first.insert.length
          );

          // Trim the newline off the last op
          let last = _.last(ops);
          last.insert = last.insert.substring(0, last.insert.length - 1);

          // Determine the list type
          let prefix = firstMatch[1];
          let listType = prefix.match(/\S+\./) ? 'ordered' : 'bullet';

          // Determine the list indent
          let style = node.getAttribute('style').replace(/\n+/g, '');
          let levelMatch = style.match(/level(\d+)/);
          let indent = levelMatch ? levelMatch[1] - 1 : 0;

          // Add the list attribute
          ops.push({ insert: '\n', attributes: { list: listType, indent } });

          return new Delta(ops);
        },
      }
    };
    </script>

How do you resolve this in react ?
I am still facing the formatting issue while copying/pasting from MS word. I have try your code but the marchers not able to recognize and not calling the function or execute the function.
can you please help me I have to solve this ASAP customer is waiting for to resolve this and if not work any solution i have to replace quill editor from whole web application.

It will be glad if you help me and get rid of this issue.

Thanks in advance.