@omegagrid/markdown 0.6.26 → 0.6.28

package/dist/components/features/htmlBlock.js

@@ -1,26 +1,76 @@
-var _HtmlBlockComponent_content,__decorate=this&&this.__decorate||function(t,e,o,i){var n,r=arguments.length,s=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,i);else for(var l=t.length-1;l>=0;l--)(n=t[l])&&(s=(r<3?n(s):r>3?n(e,o,s):n(e,o))||s);return r>3&&s&&Object.defineProperty(e,o,s),s},__classPrivateFieldGet=this&&this.__classPrivateFieldGet||function(t,e,o,i){if("a"===o&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!i:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===o?i:"a"===o?i.call(t):i?i.value:e.get(t)},__classPrivateFieldSet=this&&this.__classPrivateFieldSet||function(t,e,o,i,n){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!n)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!n:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===i?n.call(t,o):n?n.value=o:e.set(t,o),o};import{dom,events}from"@omegagrid/core";import{LitElement,css,html}from"lit";import{customElement,property,query}from"lit/decorators.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{msg}from"@omegagrid/localize";let HtmlBlockComponent=class extends LitElement{get content(){return __classPrivateFieldGet(this,_HtmlBlockComponent_content,"f")}set content(t){__classPrivateFieldSet(this,_HtmlBlockComponent_content,t,"f"),this.requestUpdate()}constructor(){super(),_HtmlBlockComponent_content.set(this,""),this.editable=!1,this.editing=!1,this.startEdit=()=>{this.editing=!0},this.render=()=>this.editable?html`
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _HtmlBlockComponent_content;
+import { dom, events } from '@omegagrid/core';
+import { LitElement, css, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { msg } from '@omegagrid/localize';
+let HtmlBlockComponent = class HtmlBlockComponent extends LitElement {
+    get content() { return __classPrivateFieldGet(this, _HtmlBlockComponent_content, "f"); }
+    set content(val) {
+        __classPrivateFieldSet(this, _HtmlBlockComponent_content, val, "f");
+        this.requestUpdate();
+    }
+    constructor() {
+        super();
+        _HtmlBlockComponent_content.set(this, '');
+        this.editable = false;
+        this.editing = false;
+        this.startEdit = () => {
+            this.editing = true;
+        };
+        this.render = () => this.editable ? html `
 		<div class="title">Raw HTML</div>
 		<div class="body">
-			${this.editing?html`
+			${this.editing ? html `
 				<og-code-block
 					disableToolbar
 					dynamicHeight
 					language="html"
 					.content="${this.content}"
-					.editorOptions="${{minimap:{enabled:!1},lineNumbers:{renderType:0}}}"
-					@blur="${()=>this.commit()}"
-					@code.ready="${()=>this.editor.focus()}">
+					.editorOptions="${{
+            minimap: { enabled: false },
+            lineNumbers: { renderType: 0 }
+        }}"
+					@blur="${() => this.commit()}"
+					@code.ready="${() => this.editor.focus()}">
 				</og-code-block>
-			`:this.content?html`
+			` : (this.content ? html `
 				<og-code-view 
 					language="html"
 					.content="${this.content}" >
 				</og-code-view>
-			`:html`
-				<div class="placeholder">${msg("Insert HTML")}</div>
-			`}
+			` : html `
+				<div class="placeholder">${msg('Insert HTML')}</div>
+			`)}
 		</div>
-	`:unsafeHTML(this.content),this.addEventListener("click",(()=>this.startEdit()))}commit(){this.editing=!1,__classPrivateFieldSet(this,_HtmlBlockComponent_content,this.editor.model.getValue(),"f"),this.dispatchEvent(new events.ChangeEvent(__classPrivateFieldGet(this,_HtmlBlockComponent_content,"f")))}};_HtmlBlockComponent_content=new WeakMap,HtmlBlockComponent.styles=css`
+	` : unsafeHTML(this.content);
+        this.addEventListener('click', () => this.startEdit());
+    }
+    commit() {
+        this.editing = false;
+        __classPrivateFieldSet(this, _HtmlBlockComponent_content, this.editor.model.getValue(), "f");
+        this.dispatchEvent(new events.ChangeEvent(__classPrivateFieldGet(this, _HtmlBlockComponent_content, "f")));
+    }
+};
+_HtmlBlockComponent_content = new WeakMap();
+HtmlBlockComponent.styles = css `
 		* {
 			box-sizing: border-box;
 		}
@@ -49,4 +99,75 @@ var _HtmlBlockComponent_content,__decorate=this&&this.__decorate||function(t,e,o
 		og-code-view, .placeholder {
 			cursor: pointer;
 		}
-	`,__decorate([property({type:String})],HtmlBlockComponent.prototype,"content",null),__decorate([property({type:Boolean})],HtmlBlockComponent.prototype,"editable",void 0),__decorate([property({type:Boolean})],HtmlBlockComponent.prototype,"editing",void 0),__decorate([query("og-code-block")],HtmlBlockComponent.prototype,"editor",void 0),HtmlBlockComponent=__decorate([customElement("og-markdown-html-block")],HtmlBlockComponent);export{HtmlBlockComponent};export class HtmlBlock{constructor(t,e,o,i){this.md=t,this.node=e,this.view=o,this.getPos=i,this.updating=!1,this._onChange=t=>{if(this.updating)return;const e=this.view.state.tr;this.view.dispatch(e.setNodeAttribute(this.getPos()??0,"value",t.value))},this.dom=dom.createElement("og-markdown-html-block"),this.dom.editable=this.view.editable,this.dom.content=this.node.attrs?.value,this.dom.addEventListener("change",this._onChange)}update(t){return t.type===this.node.type&&(this.updating||(this.node=t,this.dom.content=this.node.attrs?.value),!0)}selectNode(){this.view.editable&&this.dom.startEdit(),this.dom.focus()}deselectNode(){}stopEvent(){return!0}destroy(){}}export const defaultCodeEditorConfig={};export function createHtmlBlockConfig(t){return t.utils.$ctx(defaultCodeEditorConfig,"htmlEditorConfigCtx")}export function createHtmlBlockView(t){return t.utils.$view(t.presets.commonmark.htmlSchema.node,(e=>(e,o,i)=>new HtmlBlock(t,e,o,i)))}
+	`;
+__decorate([
+    property({ type: String })
+], HtmlBlockComponent.prototype, "content", null);
+__decorate([
+    property({ type: Boolean })
+], HtmlBlockComponent.prototype, "editable", void 0);
+__decorate([
+    property({ type: Boolean })
+], HtmlBlockComponent.prototype, "editing", void 0);
+__decorate([
+    query('og-code-block')
+], HtmlBlockComponent.prototype, "editor", void 0);
+HtmlBlockComponent = __decorate([
+    customElement('og-markdown-html-block')
+], HtmlBlockComponent);
+export { HtmlBlockComponent };
+export class HtmlBlock {
+    // private get editor() { return (this.dom as CodeBlock)?.editor?.editor }
+    // get model() { return this.editor?.getModel() }
+    constructor(md, node, view, getPos) {
+        this.md = md;
+        this.node = node;
+        this.view = view;
+        this.getPos = getPos;
+        this.updating = false;
+        this._onChange = (e) => {
+            if (this.updating)
+                return;
+            const tr = this.view.state.tr;
+            this.view.dispatch(tr.setNodeAttribute(this.getPos() ?? 0, 'value', e.value));
+        };
+        this.dom = dom.createElement('og-markdown-html-block');
+        this.dom.editable = this.view.editable;
+        this.dom.content = this.node.attrs?.value;
+        this.dom.addEventListener('change', this._onChange);
+    }
+    update(node) {
+        if (node.type !== this.node.type)
+            return false;
+        if (this.updating)
+            return true;
+        this.node = node;
+        this.dom.content = this.node.attrs?.value;
+        return true;
+    }
+    selectNode() {
+        if (this.view.editable)
+            this.dom.startEdit();
+        this.dom.focus();
+    }
+    deselectNode() {
+        // this.component.selected = false
+    }
+    stopEvent() {
+        return true;
+    }
+    destroy() {
+        // this.component.destroy()
+    }
+}
+export const defaultCodeEditorConfig = {};
+export function createHtmlBlockConfig(md) {
+    return md.utils.$ctx(defaultCodeEditorConfig, 'htmlEditorConfigCtx');
+}
+export function createHtmlBlockView(md) {
+    return md.utils.$view(md.presets.commonmark.htmlSchema.node, _ctx => {
+        // const config = ctx.get('codeBlockConfigCtx')
+        return (node, view, getPos) => new HtmlBlock(md, node, view, getPos);
+    });
+}
+//# sourceMappingURL=htmlBlock.js.map

package/dist/components/features/index.js

@@ -1 +1,178 @@
-import{BlockHandleView}from"./blockEdit";import{ToolbarView}from"./toolbar";import{createPlaceHolder}from"./placeholder";import{createCodeBlockConfig,createCodeBlockView}from"./codeBlock";import{createHtmlBlockConfig,createHtmlBlockView}from"./htmlBlock";import linkEdit from"./linkEdit";export*from"./blockEditMenu";export*from"./htmlBlock";export*from"./linkEdit";export function configureFeatures(e,o){return t=>{t.inject(o.ctx.createSlice([],"FeaturesCtx"),e)}}const createIcon=(e,o)=>e.atomico.html`<og-fa-icon icon=${o}></og-fa-icon>`;export var EditorFeature;!function(e){e.BlockEdit="block-edit",e.Cursor="cursor",e.CodeEditor="code-editor",e.LinkTooltip="link-tooltip",e.ImageBlock="image-block",e.Toolbar="toolbar",e.Placeholder="placeholder",e.Table="table",e.Html="html"}(EditorFeature||(EditorFeature={}));const createModifyImageUrl=e=>async o=>{if(!o)return null;const t=e(o);return"string"==typeof o?t:await t};export function getFeatures(e,o,t){const r=t.modifyImageUrl?createModifyImageUrl(t.modifyImageUrl):null;return new Map([[EditorFeature.BlockEdit,{default:!0,init:()=>{e.config((e=>{e.set(o.plugins.block.blockConfig.key,{filterNodes:e=>!o.prose.findParent((e=>["table","blockquote"].includes(e.type.name)))(e)}),e.set(o.plugins.block.block.key,{view:()=>new BlockHandleView(e,o)})})).use(o.plugins.block.block)}}],[EditorFeature.Cursor,{default:!0,init:()=>{e.config((e=>{e.update(o.plugins.cursor.dropCursorConfig.key,(()=>({class:"md-editor-drop-cursor",width:4})))})).use(o.plugins.cursor.cursor)}}],[EditorFeature.ImageBlock,{default:!0,init:()=>{e.config((e=>{e.update(o.components.imageInline.inlineImageConfig.key,(e=>({uploadButton:()=>createIcon(o,"upload"),imageIcon:()=>createIcon(o,"image"),confirmButton:()=>createIcon(o,"check"),uploadPlaceholderText:"or paste link",onUpload:t.onUpload,proxyDomURL:r}))),e.update(o.components.imageBlock.imageBlockConfig.key,(e=>({uploadButton:()=>"Upload file",imageIcon:()=>createIcon(o,"image"),captionIcon:()=>createIcon(o,"comment"),confirmButton:()=>"Confirm",captionPlaceholderText:"Write Image Caption",uploadPlaceholderText:"or paste link",onUpload:t.onUpload,proxyDomURL:r})))})).use(o.components.imageBlock.imageBlockComponent).use(o.components.imageInline.imageInlineComponent)}}],[EditorFeature.LinkTooltip,{default:!0,init:()=>{const o=linkEdit.getPlugin();console.log(o),e.config(linkEdit.configure).use(o)}}],[EditorFeature.Toolbar,{default:!0,init:()=>{const t=o.plugins.tooltip.tooltipFactory("MARKDOWN_TOOLBAR");e.config((e=>{e.set(t.key,{view:t=>new ToolbarView(e,t,o)})})).use(t)}}],[EditorFeature.Placeholder,{default:!0,init:()=>{const{config:t,plugin:r}=createPlaceHolder(o);e.config((e=>{e.update(t.key,(e=>({...e})))})).use(r).use(t)}}],[EditorFeature.Table,{default:!0,init:()=>{e.config((e=>{e.update(o.components.tableBlock.tableBlockConfig.key,(e=>({renderButton:e=>{switch(e){case"add_row":case"add_col":return createIcon(o,"plus");case"delete_row":case"delete_col":return createIcon(o,"trash");case"align_col_left":return createIcon(o,"align-left");case"align_col_center":return createIcon(o,"align-center");case"align_col_right":return createIcon(o,"align-right");case"col_drag_handle":return createIcon(o,"grip-lines-vertical");case"row_drag_handle":return createIcon(o,"grip-lines")}}})))})).use(o.components.tableBlock.tableBlock)}}],[EditorFeature.CodeEditor,{default:!0,init:()=>{const t=createCodeBlockConfig(o),r=createCodeBlockView(o);e.config((e=>{e.update(t.key,(e=>({})))})).use([r,t])}}],[EditorFeature.Html,{default:!0,init:()=>{const t=createHtmlBlockConfig(o),r=createHtmlBlockView(o);e.config((e=>{e.update(t.key,(e=>({})))})).use([r,t])}}]])}
+// import { Editor } from '@milkdown/kit/core';
+// import { createSlice } from '@milkdown/kit/ctx';
+// import { BlockProvider, block, blockConfig } from '@milkdown/kit/plugin/block'
+import { BlockHandleView } from './blockEdit';
+import { ToolbarView } from './toolbar';
+import { createPlaceHolder } from './placeholder';
+import { createCodeBlockConfig, createCodeBlockView } from './codeBlock';
+import { createHtmlBlockConfig, createHtmlBlockView } from './htmlBlock';
+import linkEdit from './linkEdit';
+export * from './blockEditMenu';
+export * from './htmlBlock';
+export * from './linkEdit';
+export function configureFeatures(features, md) {
+    return (ctx) => {
+        ctx.inject(md.ctx.createSlice([], 'FeaturesCtx'), features);
+    };
+}
+const createIcon = (md, icon) => md.atomico.html `<og-fa-icon icon=${icon}></og-fa-icon>`;
+export var EditorFeature;
+(function (EditorFeature) {
+    EditorFeature["BlockEdit"] = "block-edit";
+    EditorFeature["Cursor"] = "cursor";
+    EditorFeature["CodeEditor"] = "code-editor";
+    // ListItem = 'list-item',
+    EditorFeature["LinkTooltip"] = "link-tooltip";
+    EditorFeature["ImageBlock"] = "image-block";
+    EditorFeature["Toolbar"] = "toolbar";
+    EditorFeature["Placeholder"] = "placeholder";
+    EditorFeature["Table"] = "table";
+    EditorFeature["Html"] = "html";
+})(EditorFeature || (EditorFeature = {}));
+const createModifyImageUrl = (fn) => {
+    return async (url) => {
+        if (!url)
+            return null;
+        const modUrl = fn(url);
+        return typeof url === 'string' ? modUrl : await modUrl;
+    };
+};
+export function getFeatures(editor, md, options) {
+    const modifyImageUrl = options.modifyImageUrl ? createModifyImageUrl(options.modifyImageUrl) : null;
+    return new Map([
+        [EditorFeature.BlockEdit, {
+                default: true,
+                init: () => {
+                    editor.config((ctx) => {
+                        ctx.set(md.plugins.block.blockConfig.key, {
+                            filterNodes: (pos) => {
+                                const filter = md.prose.findParent((node) => ['table', 'blockquote'].includes(node.type.name))(pos);
+                                if (filter)
+                                    return false;
+                                return true;
+                            },
+                        });
+                        ctx.set(md.plugins.block.block.key, {
+                            view: () => new BlockHandleView(ctx, md),
+                        });
+                    }).use(md.plugins.block.block);
+                    // .config((ctx) => configureMenu(ctx, config))
+                    // .use(menuAPI)
+                    // .use(menu)
+                }
+            }], [EditorFeature.Cursor, {
+                default: true,
+                init: () => {
+                    editor.config((ctx) => {
+                        ctx.update(md.plugins.cursor.dropCursorConfig.key, () => ({
+                            class: 'md-editor-drop-cursor',
+                            width: 4,
+                            // color: '#ff0000',
+                        }));
+                    }).use(md.plugins.cursor.cursor);
+                }
+            }], [EditorFeature.ImageBlock, {
+                default: true,
+                init: () => {
+                    editor.config((ctx) => {
+                        ctx.update(md.components.imageInline.inlineImageConfig.key, (_value) => ({
+                            uploadButton: () => createIcon(md, 'upload'),
+                            imageIcon: () => createIcon(md, 'image'),
+                            confirmButton: () => createIcon(md, 'check'),
+                            uploadPlaceholderText: 'or paste link',
+                            onUpload: options.onUpload,
+                            proxyDomURL: modifyImageUrl,
+                        }));
+                        ctx.update(md.components.imageBlock.imageBlockConfig.key, (_value) => ({
+                            uploadButton: () => 'Upload file',
+                            imageIcon: () => createIcon(md, 'image'),
+                            captionIcon: () => createIcon(md, 'comment'),
+                            confirmButton: () => 'Confirm',
+                            captionPlaceholderText: 'Write Image Caption',
+                            uploadPlaceholderText: 'or paste link',
+                            onUpload: options.onUpload,
+                            proxyDomURL: modifyImageUrl,
+                        }));
+                    })
+                        .use(md.components.imageBlock.imageBlockComponent)
+                        .use(md.components.imageInline.imageInlineComponent);
+                }
+            }], [EditorFeature.LinkTooltip, {
+                default: true,
+                init: () => {
+                    // const toolbar = md.plugins.tooltip.tooltipFactory('MARKDOWN_LINK_EDIT_TOOLBAR');
+                    const plugin = linkEdit.getPlugin();
+                    console.log(plugin);
+                    editor.config(linkEdit.configure)
+                        /*.config((ctx) => {
+                            ctx.update(linkEdit.getState().key, (prev) => ({...prev}));
+                        })*/
+                        .use(plugin);
+                }
+            }], [EditorFeature.Toolbar, {
+                default: true,
+                init: () => {
+                    const toolbar = md.plugins.tooltip.tooltipFactory('MARKDOWN_TOOLBAR');
+                    editor.config((ctx) => {
+                        ctx.set(toolbar.key, {
+                            view: (view) => new ToolbarView(ctx, view, md),
+                        });
+                    })
+                        .use(toolbar);
+                }
+            }], [EditorFeature.Placeholder, {
+                default: true,
+                init: () => {
+                    const { config, plugin } = createPlaceHolder(md);
+                    editor.config((ctx) => {
+                        ctx.update(config.key, (prev) => {
+                            return { ...prev };
+                        });
+                    })
+                        .use(plugin)
+                        .use(config);
+                }
+            }], [EditorFeature.Table, {
+                default: true,
+                init: () => {
+                    editor.config((ctx) => {
+                        ctx.update(md.components.tableBlock.tableBlockConfig.key, (_prev) => ({
+                            renderButton: (renderType) => {
+                                switch (renderType) {
+                                    case 'add_row': return createIcon(md, 'plus');
+                                    case 'add_col': return createIcon(md, 'plus');
+                                    case 'delete_row': return createIcon(md, 'trash');
+                                    case 'delete_col': return createIcon(md, 'trash');
+                                    case 'align_col_left': return createIcon(md, 'align-left');
+                                    case 'align_col_center': return createIcon(md, 'align-center');
+                                    case 'align_col_right': return createIcon(md, 'align-right');
+                                    case 'col_drag_handle': return createIcon(md, 'grip-lines-vertical');
+                                    case 'row_drag_handle': return createIcon(md, 'grip-lines');
+                                }
+                            }
+                        }));
+                    })
+                        .use(md.components.tableBlock.tableBlock);
+                }
+            }], [EditorFeature.CodeEditor, {
+                default: true,
+                init: () => {
+                    const codeBlockConfig = createCodeBlockConfig(md);
+                    const codeBlockView = createCodeBlockView(md);
+                    editor.config((ctx) => {
+                        ctx.update(codeBlockConfig.key, (_defaultConfig) => ({}));
+                    }).use([codeBlockView, codeBlockConfig]);
+                }
+            }], [EditorFeature.Html, {
+                default: true,
+                init: () => {
+                    const htmlBlockConfig = createHtmlBlockConfig(md);
+                    const htmlBlockView = createHtmlBlockView(md);
+                    editor.config((ctx) => {
+                        ctx.update(htmlBlockConfig.key, (_defaultConfig) => ({}));
+                    }).use([htmlBlockView, htmlBlockConfig]);
+                }
+            }]
+    ]);
+}
+//# sourceMappingURL=index.js.map

package/dist/components/features/linkEdit/component.d.ts

@@ -7,6 +7,6 @@ export declare class LinkEdit extends LitElement {
     value: string;
     input: Input;
     constructor();
-    render: () => import("lit").TemplateResult<1>;
+    render: () => import("lit-html").TemplateResult<1>;
 }
 //# sourceMappingURL=component.d.ts.map

package/dist/components/features/linkEdit/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../src/components/features/linkEdit/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,KAAK,EAAU,MAAM,iBAAiB,CAAC;AAEhD,qBACa,QAAS,SAAQ,UAAU;IAEvC,MAAM,CAAC,MAAM,0BA8BX;IAEF,GAAG,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;IAGtB,KAAK,SAAM;IAGX,KAAK,EAAE,KAAK,CAAC;;IAab,MAAM,wCAmBJ;CACF"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../src/components/features/linkEdit/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,KAAK,EAAU,MAAM,iBAAiB,CAAC;AAEhD,qBACa,QAAS,SAAQ,UAAU;IAEvC,MAAM,CAAC,MAAM,0BA8BX;IAEF,GAAG,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;IAGtB,KAAK,SAAM;IAGX,KAAK,EAAE,KAAK,CAAC;;IAab,MAAM,6CAmBJ;CACF"}

package/dist/components/features/linkEdit/component.js

@@ -1,4 +1,20 @@
-var __decorate=this&&this.__decorate||function(t,e,o,n){var i,r=arguments.length,c=r<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)c=Reflect.decorate(t,e,o,n);else for(var s=t.length-1;s>=0;s--)(i=t[s])&&(c=(r<3?i(c):r>3?i(e,o,c):i(e,o))||c);return r>3&&c&&Object.defineProperty(e,o,c),c};import{LitElement,css,html}from"lit";import{customElement,property,query}from"lit/decorators.js";import{events}from"@omegagrid/core";let LinkEdit=class extends LitElement{constructor(){super(),this.value="",this.render=()=>html`
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { events } from "@omegagrid/core";
+let LinkEdit = class LinkEdit extends LitElement {
+    constructor() {
+        super();
+        this.value = '';
+        // command(key: milkdown.core.CmdKey<unknown>) {
+        // 	this.ctx.get(this.md.core.commandsCtx).call(key);
+        // }
+        this.render = () => html `
 		<div class="inner">
 			<og-icon icon="link"></og-icon>
 
@@ -7,13 +23,23 @@ var __decorate=this&&this.__decorate||function(t,e,o,n){var i,r=arguments.length
 				.value="${this.value}">
 			</og-input>
 
-			<og-button icon="check" @click="${()=>this.dispatchEvent(new events.ChangeEvent({value:this.input.value}))}">
+			<og-button icon="check" @click="${() => this.dispatchEvent(new events.ChangeEvent({
+            value: this.input.value
+        }))}">
 			</og-button>
 
-			<og-button icon="trash" color="red" @click="${()=>this.dispatchEvent(new events.ChangeEvent({value:null}))}">
+			<og-button icon="trash" color="red" @click="${() => this.dispatchEvent(new events.ChangeEvent({
+            value: null
+        }))}">
 			</og-button>
 		</div>
-	`,this.addEventListener("click",(t=>t.stopPropagation())),this.addEventListener("mousedown",(t=>t.stopPropagation())),this.addEventListener("mouseup",(t=>t.stopPropagation()))}};LinkEdit.styles=css`
+	`;
+        this.addEventListener('click', (e) => e.stopPropagation());
+        this.addEventListener('mousedown', (e) => e.stopPropagation());
+        this.addEventListener('mouseup', (e) => e.stopPropagation());
+    }
+};
+LinkEdit.styles = css `
 		* {
 			box-sizing: border-box;
 		}
@@ -43,4 +69,15 @@ var __decorate=this&&this.__decorate||function(t,e,o,n){var i,r=arguments.length
 		.inner > og-button {
 			flex: 0 20px;
 		}
-	`,__decorate([property({type:String})],LinkEdit.prototype,"value",void 0),__decorate([query("og-input")],LinkEdit.prototype,"input",void 0),LinkEdit=__decorate([customElement("og-markdown-linkedit")],LinkEdit);export{LinkEdit};
+	`;
+__decorate([
+    property({ type: String })
+], LinkEdit.prototype, "value", void 0);
+__decorate([
+    query('og-input')
+], LinkEdit.prototype, "input", void 0);
+LinkEdit = __decorate([
+    customElement('og-markdown-linkedit')
+], LinkEdit);
+export { LinkEdit };
+//# sourceMappingURL=component.js.map

package/dist/components/features/linkEdit/config.js

@@ -1 +1,64 @@
-import{debounce}from"ts-debounce";import{LinkEditView}from"./view";import{md}from"../../../loader";import{findMarkPosition,shouldShowPreviewWhenHover}from"./utils";import{getLinkEditAPI,getLinkEditState}from"./slices";let tooltip;export function getTooltip(){return tooltip||(tooltip=md.plugins.tooltip.tooltipFactory("MARKDOWN_LINK_EDIT")),tooltip}export function configureLinkEdit(e){const t=getLinkEditState();let o;e.update(getLinkEditAPI().key,(e=>({...e,addLink:(e,t)=>{o?.addLink(e,t)},editLink:(e,t,i)=>{o?.editLink(e,t,i)},removeLink:(e,t)=>{o?.removeLink(e,t)}})));const i=debounce(((i,n)=>{if(!o)return;if(!i.hasFocus())return;if("edit"===e.get(t.key).mode)return;const r=shouldShowPreviewWhenHover(e,i,n);if(r){const e=i.state.doc.resolve(r.pos),t=findMarkPosition(r.mark,r.node,i.state.doc,e.before(),e.after()),n=t.start,d=t.end;o.show(r.mark,n,d,md.prose.posToDOMRect(i,n,d))}else o.hide()}),200);e.set(getTooltip().key,{props:{handleDOMEvents:{mousemove:i,mouseleave:()=>{setTimeout((()=>{o?.hide()}),200)}}},view:t=>(o=new LinkEditView(e,t),o)})}
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { debounce } from "ts-debounce";
+import { LinkEditView } from "./view";
+import { md } from "../../../loader";
+import { findMarkPosition, shouldShowPreviewWhenHover } from "./utils";
+import { getLinkEditAPI, getLinkEditState } from "./slices";
+let tooltip;
+export function getTooltip() {
+    if (!tooltip)
+        tooltip = md.plugins.tooltip.tooltipFactory('MARKDOWN_LINK_EDIT');
+    return tooltip;
+}
+export function configureLinkEdit(ctx) {
+    const linkEditState = getLinkEditState();
+    let linkEditView;
+    ctx.update(getLinkEditAPI().key, (api) => ({
+        ...api,
+        addLink: (from, to) => {
+            linkEditView?.addLink(from, to);
+        },
+        editLink: (mark, from, to) => {
+            linkEditView?.editLink(mark, from, to);
+        },
+        removeLink: (from, to) => {
+            linkEditView?.removeLink(from, to);
+        },
+    }));
+    const DELAY = 200;
+    const onMouseMove = debounce((view, event) => {
+        if (!linkEditView)
+            return;
+        if (!view.hasFocus())
+            return;
+        const state = ctx.get(linkEditState.key);
+        if (state.mode === 'edit')
+            return;
+        const result = shouldShowPreviewWhenHover(ctx, view, event);
+        if (result) {
+            const position = view.state.doc.resolve(result.pos);
+            const markPosition = findMarkPosition(result.mark, result.node, view.state.doc, position.before(), position.after());
+            const from = markPosition.start;
+            const to = markPosition.end;
+            linkEditView.show(result.mark, from, to, md.prose.posToDOMRect(view, from, to));
+            return;
+        }
+        linkEditView.hide();
+    }, DELAY);
+    const onMouseLeave = () => {
+        setTimeout(() => { linkEditView?.hide(); }, DELAY);
+    };
+    ctx.set(getTooltip().key, {
+        props: {
+            handleDOMEvents: {
+                mousemove: onMouseMove,
+                mouseleave: onMouseLeave,
+            },
+        },
+        view: (view) => {
+            linkEditView = new LinkEditView(ctx, view);
+            return linkEditView;
+        },
+    });
+}
+//# sourceMappingURL=config.js.map

package/dist/components/features/linkEdit/index.js

@@ -1 +1,14 @@
-import{configureLinkEdit,getTooltip}from"./config";import{getLinkEditAPI,getLinkEditConfig,getLinkEditState}from"./slices";export*from"./component";export default{configure:configureLinkEdit,getState:getLinkEditState,getPlugin:()=>[getLinkEditState(),getLinkEditAPI(),getLinkEditConfig(),getTooltip()].flat()};
+import { configureLinkEdit, getTooltip } from './config';
+import { getLinkEditAPI, getLinkEditConfig, getLinkEditState } from './slices';
+export * from './component';
+export default {
+    configure: configureLinkEdit,
+    getState: getLinkEditState,
+    getPlugin: () => ([
+        getLinkEditState(),
+        getLinkEditAPI(),
+        getLinkEditConfig(),
+        getTooltip()
+    ].flat())
+};
+//# sourceMappingURL=index.js.map

package/dist/components/features/linkEdit/slices.js

@@ -1 +1,23 @@
-import{md}from"../../../loader";const defaultState={mode:"preview"};let linkEditState;export const getLinkEditState=()=>(linkEditState||(linkEditState=md.utils.$ctx({...defaultState},"linkEditStateCtx")),linkEditState);const defaultAPI={addLink:()=>{},editLink:()=>{},removeLink:()=>{}};let api;export const getLinkEditAPI=()=>api??(api=md.utils.$ctx({...defaultAPI},"linkEditAPICtx"));const defaultConfig={onCopyLink:()=>{},inputPlaceholder:"Paste link..."};let config;export const getLinkEditConfig=()=>config??(config=md.utils.$ctx({...defaultConfig},"linkEditConfigCtx"));
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { md } from "../../../loader";
+const defaultState = { mode: 'preview' };
+let linkEditState;
+export const getLinkEditState = () => {
+    if (!linkEditState)
+        linkEditState = md.utils.$ctx({ ...defaultState }, 'linkEditStateCtx');
+    return linkEditState;
+};
+const defaultAPI = {
+    addLink: () => { },
+    editLink: () => { },
+    removeLink: () => { },
+};
+let api;
+export const getLinkEditAPI = () => api ?? (api = md.utils.$ctx({ ...defaultAPI }, 'linkEditAPICtx'));
+const defaultConfig = {
+    onCopyLink: () => { },
+    inputPlaceholder: 'Paste link...',
+};
+let config;
+export const getLinkEditConfig = () => config ?? (config = md.utils.$ctx({ ...defaultConfig }, 'linkEditConfigCtx'));
+//# sourceMappingURL=slices.js.map

package/dist/components/features/linkEdit/utils.js

@@ -1 +1,33 @@
-import{md}from"../../../loader";export function findMarkPosition(t,e,n,o,r){let s={start:-1,end:-1};return n.nodesBetween(o,r,((n,o)=>{if(s.start>-1)return!1;-1===s.start&&t.isInSet(n.marks)&&e===n&&(s={start:o,end:o+Math.max(n.textContent.length,1)})})),s}export function shouldShowPreviewWhenHover(t,e,n){const o=e.posAtCoords({left:n.clientX,top:n.clientY});if(!o)return;const{pos:r}=o,s=e.state.doc.nodeAt(r);if(!s)return;const i=s.marks.find((e=>e.type===md.presets.commonmark.linkSchema.mark.type(t)));return i?{show:!0,pos:r,node:s,mark:i}:void 0}
+import { md } from "../../../loader";
+export function findMarkPosition(mark, node, doc, from, to) {
+    let markPos = { start: -1, end: -1 };
+    doc.nodesBetween(from, to, (n, pos) => {
+        // stop recursive finding if result is found
+        if (markPos.start > -1)
+            return false;
+        if (markPos.start === -1 && mark.isInSet(n.marks) && node === n) {
+            markPos = {
+                start: pos,
+                end: pos + Math.max(n.textContent.length, 1),
+            };
+        }
+        return undefined;
+    });
+    return markPos;
+}
+export function shouldShowPreviewWhenHover(ctx, view, event) {
+    const $pos = view.posAtCoords({ left: event.clientX, top: event.clientY });
+    if (!$pos)
+        return;
+    const { pos } = $pos;
+    const node = view.state.doc.nodeAt(pos);
+    if (!node)
+        return;
+    const mark = node.marks.find((mark) => {
+        return mark.type === md.presets.commonmark.linkSchema.mark.type(ctx);
+    });
+    if (!mark)
+        return;
+    return { show: true, pos, node, mark };
+}
+//# sourceMappingURL=utils.js.map