Merge pull request #458 from Harbour-Enterprises/nick/har-8863-lists-v1

HAR-8863 - Lists v1

Author: edoversb

package-lock.json

@@ -71,6 +71,7 @@ export class Editor extends EventEmitter {
     annotations: false,
     isInternal: false,
     externalExtensions: [],
+    numbering: {},
     onBeforeCreate: () => null,
     onCreate: () => null,
     onUpdate: () => null,
@@ -500,11 +501,11 @@ export class Editor extends EventEmitter {
    * Load the data from DOCX to be used in the schema.
    * Expects a DOCX file.
    */
-  static async loadXmlData(fileSource) {
+  static async loadXmlData(fileSource, isNode = false) {
     if (!fileSource) return;
 
     const zipper = new DocxZipper();
-    const xmlFiles = await zipper.getDocxData(fileSource);
+    const xmlFiles = await zipper.getDocxData(fileSource, isNode);
     const mediaFiles = zipper.media;
 
     return [xmlFiles, mediaFiles, zipper.mediaFiles, zipper.fonts];
@@ -983,11 +984,14 @@ export class Editor extends EventEmitter {
     const rels = this.converter.schemaToXml(this.converter.convertedXml['word/_rels/document.xml.rels'].elements[0]);
     const media = this.converter.addedMedia;
 
+    const numberingData = this.converter.convertedXml['word/numbering.xml'];
+    const numbering = this.converter.schemaToXml(numberingData.elements[0]);
     const updatedDocs = {
       'word/document.xml': String(documentXml),
       'docProps/custom.xml': String(customXml),
       'word/settings.xml': String(customSettings),
       'word/_rels/document.xml.rels': String(rels),
+      'word/numbering.xml': String(numbering),
 
       // Replace & with & in styles.xml as DOCX viewers can't handle it
       'word/styles.xml': String(styles).replace(/&/gi, '&'),

packages/super-editor/src/core/Editor.js

@@ -2,6 +2,7 @@ import { canJoin } from 'prosemirror-transform';
 import { getNodeType } from '../helpers/getNodeType.js';
 import { findParentNode } from '../helpers/findParentNode.js';
 import { isList } from '../helpers/isList.js';
+import { baseBulletList, baseOrderedListDef } from '../helpers/baseListDefinitions';
 
 /**
  * Join list backwards.
@@ -67,12 +68,15 @@ export const toggleList =
     if (!range) return false;
 
     const parentList = findParentNode((node) => isList(node.type.name, extensions))(selection);
+    const { numbering } = editor.converter;
 
     // This is the case when we toggle an existing list.
     if (range.depth >= 1 && parentList && range.depth - parentList.depth <= 1) {
       // If we toggle to the same list type,
       // then execute `liftListItem` command.
       if (parentList.node.type === listType) {
+        const { listId } = parentList.node.attrs;
+        editor.converter.numbering = removeListDefinitions(listId, numbering);
         return commands.liftListItem(itemType);
       }
 
@@ -103,6 +107,11 @@ export const toggleList =
       };
     };
 
+    // Update the numbering definition for this document
+    const newListId = getNewListId(numbering.definitions);
+    editor.converter.numbering = generateNewListDefinition(newListId, numbering, listType);
+    attributes.listId = newListId;
+
     // This is the case when there is no need to ensureMarks.
     if (!keepMarks || !marks || !dispatch) {
       const result = chain()
@@ -128,3 +137,48 @@ export const toggleList =
 
     return result;
   };
+
+
+  const getNewListId = (definitions) => Math.max(...Object.keys(definitions).map(Number)) + 1;
+
+  const generateNewListDefinition = (newListId, numbering, listType) => {
+    // Generate a new numId to add to numbering.xml
+    const definition = listType.name === 'orderedList' ? baseOrderedListDef : baseBulletList;
+    const newNumbering = { ...numbering };
+  
+    // Generate the new abstractNum definition
+    const newAbstractId = getNewListId(newNumbering.abstracts);
+    const newAbstractDef = {
+      ...definition,
+      attributes: {
+        ...definition.attributes,
+        'w:abstractNumId': String(newAbstractId),
+      }
+    };
+    newNumbering.abstracts[newAbstractId] = newAbstractDef;
+  
+    // Generate the new numId definition
+    const newNumDef = {
+      type: 'element',
+      name: 'w:num',
+      attributes: {
+        'w:numId': String(newListId),
+        'w16cid:durableId': '485517411'
+      },
+      elements: [
+        { name: 'w:abstractNumId', attributes: { 'w:val': String(newAbstractId) } },
+      ]
+    };
+    newNumbering.definitions[newListId] = newNumDef;  
+    return newNumbering;
+  };
+  
+  const removeListDefinitions = (listId, numbering) => {
+    const { definitions, abstracts } = numbering;
+
+    const abstractId = definitions[listId].elements[0].attributes['w:val'];
+    delete definitions[listId];
+    delete abstracts[abstractId];
+
+    return numbering;
+  };

packages/super-editor/src/core/commands/toggleList.js

@@ -2,6 +2,36 @@ import { Extension } from '../Extension.js';
 import { isIOS } from '../utilities/isIOS.js';
 import { isMacOS } from '../utilities/isMacOS.js';
 
+export const handleEnter = (editor) => {
+  editor.commands.first(({ commands }) => [
+    () => commands.newlineInCode(),
+    () => commands.createParagraphNear(),
+    () => commands.liftEmptyBlock(),
+    () => commands.splitBlock(),
+  ]);
+};
+
+export const handleBackspace = (editor) => {
+  editor.commands.first(({ commands, tr }) => [
+    () => commands.undoInputRule(),
+    () => {
+      tr.setMeta('inputType', 'deleteContentBackward');
+      return false;
+    },
+    () => commands.deleteSelection(),
+    () => commands.joinBackward(),
+    () => commands.selectNodeBackward(),
+  ]);
+};
+
+export const handleDelete = (editor) => {
+  editor.commands.first(({ commands }) => [
+    () => commands.deleteSelection(),
+    () => commands.joinForward(),
+    () => commands.selectNodeForward(),
+  ]);
+};
+
 /**
  * For reference.
  * https://github.com/ProseMirror/prosemirror-commands/blob/master/src/commands.ts
@@ -10,41 +40,14 @@ export const Keymap = Extension.create({
   name: 'keymap',
 
   addShortcuts() {
-    const handleEnter = () =>
-      this.editor.commands.first(({ commands }) => [
-        () => commands.newlineInCode(),
-        () => commands.createParagraphNear(),
-        () => commands.liftEmptyBlock(),
-        () => commands.splitBlock(),
-      ]);
-
-    const handleBackspace = () =>
-      this.editor.commands.first(({ commands, tr }) => [
-        () => commands.undoInputRule(),
-        () => {
-          tr.setMeta('inputType', 'deleteContentBackward');
-          return false;
-        },
-        () => commands.deleteSelection(),
-        () => commands.joinBackward(),
-        () => commands.selectNodeBackward(),
-      ]);
-
-    const handleDelete = () =>
-      this.editor.commands.first(({ commands }) => [
-        () => commands.deleteSelection(),
-        () => commands.joinForward(),
-        () => commands.selectNodeForward(),
-      ]);
-
     const baseKeymap = {
-      Enter: handleEnter,
+      Enter: () => handleEnter(this.editor),
       'Mod-Enter': () => this.editor.commands.exitCode(),
-      Backspace: handleBackspace,
-      'Mod-Backspace': handleBackspace,
-      'Shift-Backspace': handleBackspace,
-      Delete: handleDelete,
-      'Mod-Delete': handleDelete,
+      Backspace: () => handleBackspace(this.editor),
+      'Mod-Backspace': () => handleBackspace(this.editor),
+      'Shift-Backspace': () => handleBackspace(this.editor),
+      Delete: () =>  handleDelete(this.editor),
+      'Mod-Delete': () => handleDelete(this.editor),
       'Mod-a': () => this.editor.commands.selectAll(),
       Tab: () => this.editor.commands.insertTabNode(),
     };
@@ -55,12 +58,12 @@ export const Keymap = Extension.create({
 
     const macBaseKeymap = {
       ...baseKeymap,
-      'Ctrl-h': handleBackspace,
-      'Alt-Backspace': handleBackspace,
-      'Ctrl-d': handleDelete,
-      'Ctrl-Alt-Backspace': handleDelete,
-      'Alt-Delete': handleDelete,
-      'Alt-d': handleDelete,
+      'Ctrl-h': () => handleBackspace(this.editor),
+      'Alt-Backspace': () => handleBackspace(this.editor),
+      'Ctrl-d': () => handleDelete(this.editor),
+      'Ctrl-Alt-Backspace': () => handleDelete(this.editor),
+      'Alt-Delete': () => handleDelete(this.editor),
+      'Alt-d': () => handleDelete(this.editor),
       'Ctrl-a': () => this.editor.commands.selectTextblockStart(),
       'Ctrl-e': () => this.editor.commands.selectTextblockEnd(),
       'Ctrl-t': () => this.editor.commands.insertTabChar(),