From ee3deab2c00c25f0d01b513fadb8ad18df181a25 Mon Sep 17 00:00:00 2001
From: michi <michael@adornis.de>
Date: Wed, 19 Feb 2025 13:21:27 +0000
Subject: [PATCH 1/2] fix: remove red styling for list bullet points

---
 lab/html-based-buildify/client/nodes/list.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/lab/html-based-buildify/client/nodes/list.ts b/lab/html-based-buildify/client/nodes/list.ts
index dce832a734..073ae5fd0f 100644
--- a/lab/html-based-buildify/client/nodes/list.ts
+++ b/lab/html-based-buildify/client/nodes/list.ts
@@ -33,9 +33,5 @@ export const listConfig: INodeConfig = {
     .prosemirror-flat-list[data-list-kind='ordered']::before {
       transform: translate(-6px, -1px);
     }
-
-    .prosemirror-flat-list::marker {
-      color: red;
-    }
   `,
 };
-- 
GitLab


From bb5965a00a1e1ae505491f09f7e211cbfbeb5cd4 Mon Sep 17 00:00:00 2001
From: michi <michael@adornis.de>
Date: Wed, 19 Feb 2025 13:23:01 +0000
Subject: [PATCH 2/2] feat: ensure doc node attrs & parse breakpoints

---
 lab/html-based-buildify/client/nodes/doc.ts   | 24 +----------
 .../client/plugins/EnsureDocNodeAttrs.ts      | 17 ++++++++
 .../client/plugins/HyphenationPlugin.ts       | 16 -------
 .../client/prosemirror-editor.ts              | 43 ++++++++-----------
 lab/html-based-buildify/schema/nodes/doc.ts   | 10 ++++-
 5 files changed, 45 insertions(+), 65 deletions(-)
 create mode 100644 lab/html-based-buildify/client/plugins/EnsureDocNodeAttrs.ts
 delete mode 100644 lab/html-based-buildify/client/plugins/HyphenationPlugin.ts

diff --git a/lab/html-based-buildify/client/nodes/doc.ts b/lab/html-based-buildify/client/nodes/doc.ts
index 1fb4e14988..4aaee7c17c 100644
--- a/lab/html-based-buildify/client/nodes/doc.ts
+++ b/lab/html-based-buildify/client/nodes/doc.ts
@@ -1,6 +1,5 @@
 import type { Styles } from '@adornis/ass/style.js';
 import type { Maybe } from '@adornis/base/utilTypes.js';
-import { SizeBreakpointConsumer } from '@adornis/buildify/client/globals/consumer.js';
 import { ChemistryLitElement } from '@adornis/chemistry/chemistry-lit-element.js';
 import { ComponentSizeController } from '@adornis/chemistry/controllers/component-size-controller.js';
 import { RXController } from '@adornis/chemistry/controllers/RXController.js';
@@ -8,7 +7,6 @@ import { xComponents } from '@adornis/chemistry/elements/x-components.js';
 import { ContextProvider, createContext, type Context } from '@lit/context';
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import type { NodeView } from 'prosemirror-view';
 import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs';
 import { Contexts, Size } from '../../db/enums.js';
 import { DOC_SCHEMA } from '../../schema/nodes/doc.js';
@@ -24,6 +22,7 @@ export const doc: INodeConfig = {
 @customElement('node-doc')
 export class NodeDoc extends ChemistryLitElement {
   @property({ attribute: 'mode' }) mode = new RXController<'view' | 'edit'>(this, 'view');
+  @property({ attribute: 'breakpoints', type: String }) breakpoints: string | undefined = undefined;
 
   protected _componentSizeController = new ComponentSizeController(this, { triggerUpdates: false });
   protected _sizeProvider = new ContextProvider<Context<Contexts.SIZE, Maybe<Size>>>(this, {
@@ -33,8 +32,6 @@ export class NodeDoc extends ChemistryLitElement {
     context: createContext(Contexts.MODE),
   });
 
-  protected _consumedSizeBreakpoints = SizeBreakpointConsumer(this);
-
   override connectedCallback(): void {
     super.connectedCallback();
 
@@ -48,7 +45,7 @@ export class NodeDoc extends ChemistryLitElement {
         }),
       )
       .subscribe(width => {
-        const screenSize = this._consumedSizeBreakpoints.value;
+        const screenSize = JSON.parse(this.breakpoints ?? '{}');
         if (!screenSize) return;
         if (width <= screenSize[Size.MOBILE]) return this._sizeProvider.setValue(Size.MOBILE, true);
         if (width <= screenSize[Size.TABLET]) return this._sizeProvider.setValue(Size.TABLET, true);
@@ -57,7 +54,6 @@ export class NodeDoc extends ChemistryLitElement {
 
     // mode
     this.mode.observable.pipe(filter(Boolean)).subscribe(mode => {
-      console.log('mode changed');
       this._modeProvider.setValue(mode, true);
     });
   }
@@ -78,19 +74,3 @@ export class NodeDoc extends ChemistryLitElement {
     ] as Styles[];
   }
 }
-
-export class DocNodeView implements NodeView {
-  dom: HTMLElement;
-  contentDOM: HTMLElement;
-
-  constructor(node) {
-    console.log('is this even called?');
-    this.dom = document.createElement('div');
-    this.dom.classList.add('editor-doc-wrapper'); // Sichtbarer Wrapper
-
-    this.contentDOM = document.createElement('div');
-    this.contentDOM.classList.add('editor-content'); // Hier wird der Editor gerendert
-
-    this.dom.appendChild(this.contentDOM);
-  }
-}
diff --git a/lab/html-based-buildify/client/plugins/EnsureDocNodeAttrs.ts b/lab/html-based-buildify/client/plugins/EnsureDocNodeAttrs.ts
new file mode 100644
index 0000000000..3e44b8a70d
--- /dev/null
+++ b/lab/html-based-buildify/client/plugins/EnsureDocNodeAttrs.ts
@@ -0,0 +1,17 @@
+import { Plugin } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+
+export function EnsureDocNodeAttrs(attrs: Record<string, string>) {
+  return new Plugin({
+    view(editorView: EditorView) {
+      for (const key of Object.keys(attrs)) {
+        const value = attrs[key];
+        // @ts-expect-error readonly, but works
+        editorView.state.doc.attrs[key] = value;
+      }
+      return {
+        update(view) {},
+      };
+    },
+  });
+}
diff --git a/lab/html-based-buildify/client/plugins/HyphenationPlugin.ts b/lab/html-based-buildify/client/plugins/HyphenationPlugin.ts
deleted file mode 100644
index 6058159e89..0000000000
--- a/lab/html-based-buildify/client/plugins/HyphenationPlugin.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Plugin } from 'prosemirror-state';
-import { EditorView } from 'prosemirror-view';
-
-export function HyphenationPlugin(enable: boolean) {
-  return new Plugin({
-    view(editorView: EditorView) {
-      // @ts-expect-error readonly, but works
-      editorView.state.doc.attrs['style'] = 'hyphens: auto;';
-      // @ts-expect-error readonly, but works
-      editorView.state.doc.attrs['lang'] = 'de';
-      return {
-        update(view) {},
-      };
-    },
-  });
-}
diff --git a/lab/html-based-buildify/client/prosemirror-editor.ts b/lab/html-based-buildify/client/prosemirror-editor.ts
index 2bb03a7722..c7ca50bc35 100644
--- a/lab/html-based-buildify/client/prosemirror-editor.ts
+++ b/lab/html-based-buildify/client/prosemirror-editor.ts
@@ -36,12 +36,11 @@ import { EditGlobalSettingsMenuItem } from './menu-items/EditGlobalSettings.js';
 import { EditSelectedNodeMenuItem } from './menu-items/EditSelectedNode.js';
 import { RedoMenuItem } from './menu-items/RedoMenuItem.js';
 import { UndoMenuItem } from './menu-items/UndoMenuItem.js';
-import { DocNodeView } from './nodes/doc.js';
 import { addLinkOnPastePlugin } from './plugins/addLinkOnPastePlugin.js';
 import { arrowAutocompletion } from './plugins/arrowAutocompletion.js';
 import { getCurrentPathPlugin } from './plugins/currentPathBarPlugin.js';
+import { EnsureDocNodeAttrs } from './plugins/EnsureDocNodeAttrs.js';
 import { handleTransactionMetaPlugin } from './plugins/handleTransactionMetaPlugin.js';
-import { HyphenationPlugin } from './plugins/HyphenationPlugin.js';
 import { pasteHandler } from './plugins/pasteHandlerPlugin.js';
 import { germanSmartQuotesPlugin } from './plugins/quotePlugin.js';
 import { SyncWrapperWithDocPlugin } from './plugins/SyncWrapperWithDocPlugin.js';
@@ -128,11 +127,6 @@ export class ProsemirrorEditor extends FormField<string> {
   >(this, {
     context: createContext(Contexts.GLOBAL_SETTINGS_CLASS_NAME),
   });
-  protected _sizeBreakpointProvider = new ContextProvider<
-    Context<Contexts.SIZE_BREAKPOINT, Maybe<Record<Size, number>>>
-  >(this, {
-    context: createContext(Contexts.SIZE_BREAKPOINT),
-  });
 
   getPlugins(schema: Schema): Plugin[] {
     const plugins: Array<Plugin<any>> = [];
@@ -165,7 +159,13 @@ export class ProsemirrorEditor extends FormField<string> {
     plugins.push(addLinkOnPastePlugin(schema));
     plugins.push(pasteHandler);
     plugins.push(arrowAutocompletion);
-    plugins.push(HyphenationPlugin(true));
+    plugins.push(
+      EnsureDocNodeAttrs({
+        lang: 'de',
+        style: 'hyphens: auto;',
+        breakpoints: JSON.stringify(this.sizeBreakpoints.value),
+      }),
+    );
     plugins.push(SyncWrapperWithDocPlugin(this.renderRoot.querySelector(`#${EDITOR_ID}`)!));
 
     // additional ones
@@ -254,10 +254,6 @@ export class ProsemirrorEditor extends FormField<string> {
   override connectedCallback(): void {
     super.connectedCallback();
 
-    this.sizeBreakpoints.observable.pipe(filter(Boolean), distinctUntilChanged()).subscribe(breakpoints => {
-      this._sizeBreakpointProvider.setValue(breakpoints, true);
-    });
-
     this.globalSettingsClassName.observable
       .pipe(filter(Boolean), distinctUntilChanged())
       .subscribe(globalSettingsClassName => {
@@ -317,9 +313,6 @@ export class ProsemirrorEditor extends FormField<string> {
     });
     this.view = new EditorView(editorElement, {
       state,
-      nodeViews: {
-        doc: node => new DocNodeView(node),
-      },
     });
   }
 
@@ -337,21 +330,19 @@ export class ProsemirrorEditor extends FormField<string> {
   }
 
   protected updateEditor() {
-    // const editor = this.view;
-    // if (!editor) return;
-    // const schema = editor.state.schema;
-    // const newState = editor.state.reconfigure({
-    //   plugins: this.getPlugins(schema),
-    // });
-    // editor.updateState(newState);
-    // this.requestUpdate();
+    const editor = this.view;
+    if (!editor) return;
+    const schema = editor.state.schema;
+    const newState = editor.state.reconfigure({
+      plugins: this.getPlugins(schema),
+    });
+    editor.updateState(newState);
+    this.requestUpdate();
   }
 
   override render() {
     const maxWidth =
-      this._sizeBreakpointProvider.value && this._selectedSize
-        ? `${this._sizeBreakpointProvider.value[this._selectedSize]}px`
-        : '100%';
+      this.sizeBreakpoints.value && this._selectedSize ? `${this.sizeBreakpoints.value[this._selectedSize]}px` : '100%';
 
     return html`
       ${this._getEditorStylings()}
diff --git a/lab/html-based-buildify/schema/nodes/doc.ts b/lab/html-based-buildify/schema/nodes/doc.ts
index 803e41152a..a39b2cde8c 100644
--- a/lab/html-based-buildify/schema/nodes/doc.ts
+++ b/lab/html-based-buildify/schema/nodes/doc.ts
@@ -10,6 +10,7 @@ export const DOC_SCHEMA: NodeSpec = {
           class: node.getAttribute('class'),
           style: node.getAttribute('style'),
           lang: node.getAttribute('lang'),
+          breakpoints: node.getAttribute('breakpoints'),
         };
       },
     },
@@ -24,8 +25,15 @@ export const DOC_SCHEMA: NodeSpec = {
     lang: {
       default: null,
     },
+    breakpoints: {
+      default: null,
+    },
   },
-  toDOM: node => ['node-doc', { class: node.attrs.class, style: node.attrs.style, lang: node.attrs.lang }, 0],
+  toDOM: node => [
+    'node-doc',
+    { class: node.attrs.class, style: node.attrs.style, lang: node.attrs.lang, breakpoints: node.attrs.breakpoints },
+    0,
+  ],
 };
 
 export const DOC_KEY = 'doc';
-- 
GitLab