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