@kerebron/extension-odt 0.5.2 → 0.5.4

package/src/ExtensionOdt.ts

@@ -6,24 +6,19 @@ import {
   Extension,
   type UrlRewriter,
 } from '@kerebron/editor';
-import {
-  init_debug,
-  parse_content,
-  parse_styles,
-  unzip,
-} from '@kerebron/odt-wasm';
 
 import { OdtParser, OdtParserConfig } from './OdtParser.js';
 import { getDefaultsPostProcessFilters } from './postprocess/postProcess.js';
 import { Command } from '@kerebron/editor/commands';
-import { InputRulesPlugin } from '@kerebron/editor/plugins/input-rules';
+import { EditorState, Transaction } from 'prosemirror-state';
+import { urlRewrite } from './postprocess/urlRewrite.js';
 
 export interface OdtConfig extends OdtParserConfig {
   debug?: boolean;
   postProcessCommands?: Command[];
 }
 
-init_debug();
+let odtWasm: Record<string, any> | undefined = undefined;
 
 export class ExtensionOdt extends Extension {
   name = 'odt';
@@ -37,14 +32,19 @@ export class ExtensionOdt extends Extension {
     editor: CoreEditor,
     schema: Schema,
   ): Record<string, Converter> {
-    const config = this.config;
-
     const odtConverter = {
       fromDoc: async (document: Node): Promise<Uint8Array> => {
         throw new Error('Not implemented');
       },
       toDoc: async (buffer: Uint8Array): Promise<Node> => {
-        const { doc, filesMap } = odtConverter.odtToJson(buffer);
+        if (!odtWasm) {
+          odtWasm = this.config.debug
+            ? await import('@kerebron/odt-wasm/debug')
+            : await import('@kerebron/odt-wasm');
+          odtWasm = await odtWasm.init();
+        }
+
+        const { doc, filesMap } = odtConverter.odtToJson(buffer, odtWasm);
 
         const filterCommands = getDefaultsPostProcessFilters({
           doc,
@@ -53,128 +53,44 @@ export class ExtensionOdt extends Extension {
           this.config.postProcessCommands || [],
         );
 
-        const plugin = editor.state.plugins.find((plugin) =>
-          plugin instanceof InputRulesPlugin
-        );
-        if (plugin) {
-          // plugin.props.
-        }
-
-        const subEditor = editor.clone();
-        subEditor.setDocument(doc.toJSON());
+        let state = EditorState.create({ doc });
+        const dispatch = (tr: Transaction) => {
+          state = state.apply(tr);
+        };
 
-        let modified = false;
         if (this.urlFromRewriter) {
-          const imageNodes: Array<{ node: Node; pos: number }> = [];
-          subEditor.getDocument().descendants((node, pos) => {
-            if (node.type.name === 'image') {
-              imageNodes.push({ node, pos });
-            }
-          });
-
-          const linkNodes: Array<{ node: Node; pos: number }> = [];
-          subEditor.getDocument().descendants((node, pos) => {
-            if (node.marks.find((mark) => mark.type.name === 'link')) {
-              linkNodes.push({ node, pos });
-            }
-          });
-
-          const tr = subEditor.state.tr;
-
-          for (const { node, pos } of linkNodes) {
-            const linkMark = node.marks.find((mark) =>
-              mark.type.name === 'link'
-            );
-            if (!linkMark) {
-              continue;
-            }
-            let href = linkMark.attrs.href || '';
-            href = await this.urlFromRewriter(href, {
-              type: 'A',
-              dest: 'kerebron',
-            });
-            if (href !== linkMark.attrs.href) {
-              const newMarks = node.marks.map((mark) => {
-                if (mark.type.name === 'link') {
-                  const markType = this.editor.schema.marks['link'];
-                  return markType.create({ ...mark.attrs, href });
-                }
-                return mark;
-              });
-
-              const nodeType = this.editor.schema.nodes[node.type.name];
-              let replaceNode;
-              if (nodeType.isText) {
-                replaceNode = this.editor.schema.text(
-                  node.text || '',
-                  newMarks,
-                );
-              } else {
-                replaceNode = nodeType.create(
-                  node.attrs,
-                  node.content,
-                  newMarks,
-                );
-              }
-              tr.replaceWith(
-                tr.mapping.map(pos),
-                tr.mapping.map(pos + node.nodeSize),
-                replaceNode,
-              );
-            }
-          }
-
-          for (const { node, pos } of imageNodes) {
-            let src = node.attrs.src || '';
-
-            src = await this.urlFromRewriter(src, {
-              type: 'IMG',
-              dest: 'kerebron',
-              filesMap,
-            });
-
-            if (src !== node.attrs.src) {
-              const nodeType = this.editor.schema.nodes[node.type.name];
-              const replaceNode = nodeType.create(
-                { ...node.attrs, src },
-                node.content,
-                node.marks,
-              );
-              tr.replaceWith(
-                tr.mapping.map(pos),
-                tr.mapping.map(pos + node.nodeSize),
-                replaceNode,
-              );
-            }
-          }
-          subEditor.dispatchTransaction(tr), modified = true;
+          await urlRewrite(this.urlFromRewriter, filesMap, state, dispatch);
         }
 
         if (filterCommands.length > 0) {
           for (const filter of filterCommands) {
             filter(
-              subEditor.state,
-              (tr) => subEditor.dispatchTransaction(tr),
+              state,
+              (tr) => dispatch(tr),
             );
           }
-          modified = true;
         }
 
-        if (modified) {
-          return subEditor.getDocument();
+        if (this.config.debug) {
+          const event = new CustomEvent('odt:pmdoc:filtered', {
+            detail: {
+              doc: state.doc,
+            },
+          });
+          this.editor.dispatchEvent(event);
         }
 
-        return doc;
+        return state.doc;
       },
-      odtToJson: (buffer: Uint8Array) => {
-        const files = unzip(buffer);
+      odtToJson: (buffer: Uint8Array, odtWasm: any) => {
+        const files = odtWasm.unzip(buffer);
         const filesMap: Record<string, Uint8Array> = {};
         for (const k of files.keys()) {
           filesMap[k] = Uint8Array.from(files.get(k));
         }
 
-        const stylesTree = parse_styles(files.get('styles.xml'));
-        const contentTree = parse_content(files.get('content.xml'));
+        const stylesTree = odtWasm.parse_styles(files.get('styles.xml'));
+        const contentTree = odtWasm.parse_content(files.get('content.xml'));
 
         if (this.config.debug) {
           const event = new CustomEvent('odt:parsed', {

package/src/OdtParser.ts

@@ -6,7 +6,6 @@ import {
 import { getListNodesHandlers } from './node_handlers/list_node_handlers.js';
 import { getTableNodesHandlers } from './node_handlers/table_node_handlers.js';
 import { ListTracker } from './lists.js';
-import { type UrlRewriter } from '@kerebron/editor';
 
 const COURIER_FONTS = ['Courier New', 'Courier', 'Roboto Mono'];
 
@@ -16,39 +15,95 @@ export interface OdtElement {
 
 export type NodeHandler = (ctx: OdtStashContext, value: any) => void;
 
-interface ListStyle {
-  '@name': string;
+export interface ListLLevelLabelAlignment {
+  '@margin-left'?: string;
 }
 
-interface Style {
-  '@name': string;
+export interface ListLevelProperties {
+  'list-level-label-alignment': ListLLevelLabelAlignment;
+}
+
+export interface ListLevelStyleBullet {
+  '@level': number;
+  'list-level-properties': ListLevelProperties;
+}
+
+export interface ListLevelStyleNumber {
+  '@level': number;
+  '@start-value'?: number;
+  '@num-format': string;
+  'list-level-properties': ListLevelProperties;
+}
+
+export interface ListStyle {
+  '@name'?: string;
+  'list-level-style-bullet': ListLevelStyleBullet[];
+  'list-level-style-number': ListLevelStyleNumber[];
+}
+
+export interface TextProperty {
+  '@font-name'?: string;
+  '@font-weight'?: string;
+  '@font-style'?: string;
+  '@font-size'?: string;
+  '@text-underline-style'?: string;
+  '@color'?: string;
+}
+
+export interface ParagraphProperty {
+  '@break-before'?: string;
+  '@break-after'?: string;
+  '@margin-left'?: string;
+}
+
+export interface Style {
+  '@name'?: string;
   '@parent-style-name'?: string;
   styles: string[];
+  'text-properties'?: TextProperty;
+  'paragraph-properties'?: TextProperty;
 }
 
-interface StylesTree {
+export interface StylesTree {
   styles: {
     'list-style': Array<ListStyle>;
     'style': Array<Style>;
   };
 }
 
-interface AutomaticStyles {
+export interface AutomaticStyles {
   'style': Array<Style>;
 }
 
-export function resolveStyle(
+export function resolveListStyle(
   stylesTree: StylesTree,
   automaticStyles: AutomaticStyles,
   name: string,
-): Style {
-  let style: Style;
+): ListStyle {
+  let style: ListStyle | undefined;
+
+  style = stylesTree.styles['list-style'].find((item) =>
+    item['@name'] === name
+  );
 
   if (!style) {
-    style = stylesTree.styles['list-style'].find((item) =>
-      item['@name'] === name
-    );
+    style = {
+      '@name': name,
+      'list-level-style-number': [],
+      'list-level-style-bullet': [],
+    };
   }
+
+  return style;
+}
+
+export function resolveStyle(
+  stylesTree: StylesTree,
+  automaticStyles: AutomaticStyles,
+  name: string,
+): Style {
+  let style: Style | undefined;
+
   if (!style) {
     style = stylesTree.styles['style'].find((item) => item['@name'] === name);
   }
@@ -59,6 +114,7 @@ export function resolveStyle(
   if (!style) {
     style = {
       '@name': name,
+      styles: [],
     };
   }
 
@@ -72,7 +128,7 @@ export function resolveStyle(
     );
     if (parentStyle) {
       const styles = [...style['styles'], ...parentStyle['styles']];
-      for (const key in style) {
+      for (const key of Object.keys(style) as (keyof Style)[]) {
         if (typeof style[key] === 'undefined') {
           delete style[key];
         }
@@ -198,6 +254,10 @@ export class OdtStashContext {
     this.current.content = [];
   }
 
+  public dropNode() {
+    this.unstash();
+  }
+
   public closeNode(type: string, attrs = {}, marks = Mark.none) {
     const node = this.createNode(type, attrs, marks);
     this.unstash();
@@ -264,7 +324,9 @@ export class OdtStashContext {
         this.automaticStyles,
         element['@style-name'],
       )
-      : {};
+      : {
+        styles: [],
+      };
 
     return style;
   }
@@ -291,21 +353,14 @@ export class OdtParser {
       ...getBasicNodesHandlers(),
       ...getListNodesHandlers(),
       ...getTableNodesHandlers(),
-
-      'change-start': {
-        // custom(state) {
-        //   state.textMarks.add({
-        //     markName: 'change',
-        //     markAttributes: {},
-        //   });
-        // },
-      },
-      'change-end': {
-        // custom(state) {
-        //   state.textMarks.forEach((x) =>
-        //     x.markName === 'change' ? state.textMarks.delete(x) : x
-        //   );
-        // },
+      'g': () => { // Test is: embedded-diagram-example.odt
+        // DrawG draw:g
+        const node = ctx.createText(
+          'INSTEAD OF EMBEDDED DIAGRAM ABOVE USE EMBEDDED DIAGRAM FROM DRIVE AND PUT LINK TO IT IN THE DESCRIPTION. See: https://github.com/mieweb/wikiGDrive/issues/353',
+        );
+        if (node) {
+          ctx.current.content.push(node);
+        }
       },
       'frame': (ctx: OdtStashContext, odtElement: any) => {
         if (odtElement.object && odtElement.object['@href']) {
@@ -322,7 +377,7 @@ export class OdtParser {
           }
         }
         if (odtElement.image && odtElement.image['@href']) { // TODO links rewrite
-          const alt = odtElement.description?.value || '';
+          const alt = odtElement.desc?.['$value'] || '';
           const src = odtElement.image['@href'];
           ctx.openNode();
           ctx.closeNode('image', {

package/src/lists.ts

@@ -1,10 +1,8 @@
-import { OdtElement } from './OdtParser.js';
-
 export class ListNumbering {
   levels: { [level: number]: number } = {};
-  levelNodes: { [level: number]: Node } = {};
+  forceStart: { [level: number]: boolean } = {};
 
-  constructor() {
+  constructor(public readonly id: string) {
     for (let i = 0; i < 20; i++) {
       this.levels[i] = 1;
     }
@@ -16,20 +14,36 @@ export class ListNumbering {
     }
   }
 
-  setLevelNode(level: number, node: Node) {
-    this.levelNodes[level] = node;
+  clone(id: string): ListNumbering {
+    const retVal = new ListNumbering(id);
+
+    retVal.levels = structuredClone(retVal.levels);
+    retVal.forceStart = structuredClone(retVal.forceStart);
+
+    return retVal;
   }
 }
 
 export interface List {
   level: number;
-  odtElement: OdtElement;
+  id?: string;
+  styleName: string;
 }
 
 export class ListTracker {
   listStack: List[] = [];
 
-  listNumberings: Map<string, ListNumbering> = new Map<string, ListNumbering>();
-  lastNumbering?: ListNumbering;
-  preserveMinLevel = 999;
+  pushList(id?: string, styleName = ''): List {
+    const list: List = {
+      id,
+      styleName,
+      level: this.listStack.length + 1,
+    };
+    this.listStack.push(list);
+    return list;
+  }
+
+  getCurrentList(): List {
+    return this.listStack[this.listStack.length - 1];
+  }
 }

package/src/node_handlers/basic_node_handlers.ts

@@ -1,5 +1,22 @@
+import { NESTING_CLOSING, NESTING_OPENING } from '@kerebron/editor';
 import { iterateChildren, NodeHandler, OdtStashContext } from '../OdtParser.js';
 
+export function inchesToMm(value: string): number {
+  if (!value) {
+    return 0;
+  }
+  if (value.endsWith('pt')) {
+    return parseFloat(value.substring(0, value.length - 2)) * 0.3528;
+  }
+  if (value.endsWith('in')) {
+    return parseFloat(value.substring(0, value.length - 2)) * 25.4;
+  }
+  if (value.endsWith('em')) {
+    return parseFloat(value.substring(0, value.length - 2)) / 0.125 * 25.4;
+  }
+  return 0;
+}
+
 export function getInlineNodesHandlers(): Record<string, NodeHandler> {
   return {
     '$text': (ctx: OdtStashContext, value: any) => {
@@ -23,23 +40,21 @@ export function getInlineNodesHandlers(): Record<string, NodeHandler> {
       }
     },
     'rect': (ctx: OdtStashContext, odtElement: any) => {
-      // if (odtElement['@rel-width'] === '100%') {
-      //   ctx.openNode();
-      //   ctx.closeNode('hr');
-      // }
+      if (odtElement['@rel-width'] === '100%') {
+        ctx.openNode();
+        ctx.closeNode('hr');
+      }
     },
     'line-break': (ctx: OdtStashContext, odtElement: any) => {
       ctx.openNode();
       ctx.closeNode('br');
     },
     'soft-page-break': (ctx: OdtStashContext, odtElement: any) => {
-      ctx.openNode();
-      ctx.closeNode('br');
     },
 
     'bookmark': (ctx: OdtStashContext, element: any) => { // bookmark for parent para
       ctx.openNode();
-      ctx.closeNode('bookmark-node', {
+      ctx.closeNode('node_bookmark', {
         id: element['@name'],
       });
     },
@@ -59,6 +74,20 @@ export function getInlineNodesHandlers(): Record<string, NodeHandler> {
       //     : x
       // );
     },
+    'change-start': (ctx: OdtStashContext, element: any) => {
+      ctx.openNode();
+      ctx.closeNode('comment', {
+        id: element['@change-id'],
+        nesting: NESTING_OPENING,
+      });
+    },
+    'change-end': (ctx: OdtStashContext, element: any) => {
+      ctx.openNode();
+      ctx.closeNode('comment', {
+        id: element['@change-id'],
+        nesting: NESTING_CLOSING,
+      });
+    },
   };
 }
 
@@ -74,7 +103,7 @@ export function getBasicNodesHandlers(): Record<string, NodeHandler> {
       );
     },
     'p': (ctx: OdtStashContext, value: any) => {
-      const attrs = {};
+      const attrs: Record<string, any> = {};
 
       const style = ctx.getElementStyle(value);
       const heading = style.styles.find((item) =>
@@ -103,13 +132,56 @@ export function getBasicNodesHandlers(): Record<string, NodeHandler> {
     },
 
     'table-of-content': (ctx: OdtStashContext, value: any) => {
-      ctx.openNode();
+      const levels: number[] = [];
+
+      let prevMarginLeft = -1;
       for (const pElem of value['index-body']['p']) {
+        const style = ctx.getElementStyle(pElem) as any;
+        let marginLeft = 0;
+        if ('paragraph-properties' in style) {
+          marginLeft = inchesToMm(
+            style['paragraph-properties']['@margin-left'],
+          );
+        }
+
+        if (prevMarginLeft < marginLeft) {
+          if (levels.length > 0) {
+            ctx.openNode(); // list_item
+          }
+          ctx.openNode(); // bullet_list
+          levels.push(marginLeft);
+        } else {
+          for (let i = levels.length - 1; i >= 0; i--) {
+            if (levels[i] > marginLeft) {
+              ctx.closeNode('bullet_list', { odtMarginLeft: marginLeft });
+              if (i > 0) {
+                ctx.closeNode('list_item');
+              }
+              levels.pop();
+            } else {
+              break;
+            }
+          }
+        }
         ctx.openNode();
         ctx.handle('p', pElem);
         ctx.closeNode('list_item');
+
+        prevMarginLeft = marginLeft;
+      }
+
+      for (let i = levels.length - 1; i >= 0; i--) {
+        const marginLeft = levels.pop();
+        if (i > 0) {
+          ctx.closeNode('bullet_list', { odtMarginLeft: marginLeft });
+          ctx.closeNode('list_item');
+        } else {
+          ctx.closeNode('bullet_list', {
+            odtMarginLeft: marginLeft,
+            toc: true,
+          });
+        }
       }
-      ctx.closeNode('bullet_list');
     },
 
     'span': (ctx: OdtStashContext, value: any) => {