@omegagrid/markdown 0.9.38 → 0.9.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/features/blockEdit.d.ts +1 -1
- package/dist/components/features/blockEdit.d.ts.map +1 -1
- package/dist/components/features/blockEdit.js +7 -128
- package/dist/components/features/blockEditMenu.d.ts +1 -1
- package/dist/components/features/blockEditMenu.d.ts.map +1 -1
- package/dist/components/features/blockEditMenu.js +5 -226
- package/dist/components/features/codeBlock.js +1 -135
- package/dist/components/features/htmlBlock.d.ts +1 -1
- package/dist/components/features/htmlBlock.d.ts.map +1 -1
- package/dist/components/features/htmlBlock.js +11 -132
- package/dist/components/features/index.d.ts.map +1 -1
- package/dist/components/features/index.js +1 -178
- package/dist/components/features/index.js.map +1 -1
- package/dist/components/features/linkEdit/component.d.ts +1 -1
- package/dist/components/features/linkEdit/component.d.ts.map +1 -1
- package/dist/components/features/linkEdit/component.js +5 -42
- package/dist/components/features/linkEdit/config.js +1 -64
- package/dist/components/features/linkEdit/index.js +1 -14
- package/dist/components/features/linkEdit/slices.js +1 -23
- package/dist/components/features/linkEdit/utils.js +1 -33
- package/dist/components/features/linkEdit/view.js +1 -135
- package/dist/components/features/placeholder.js +1 -50
- package/dist/components/features/toolbar.d.ts +1 -1
- package/dist/components/features/toolbar.d.ts.map +1 -1
- package/dist/components/features/toolbar.js +13 -127
- package/dist/components/features/utils.js +1 -64
- package/dist/components/index.js +1 -4
- package/dist/components/markdownEditor.d.ts +1 -1
- package/dist/components/markdownEditor.d.ts.map +1 -1
- package/dist/components/markdownEditor.js +2 -138
- package/dist/components/markdownEditor.style.js +2 -22
- package/dist/components/markdownView.js +1 -19
- package/dist/components/markdownView.style.js +2 -4
- package/dist/components/styles/block-edit.js +2 -4
- package/dist/components/styles/cursor.js +2 -4
- package/dist/components/styles/image-block.js +2 -4
- package/dist/components/styles/index.js +1 -19
- package/dist/components/styles/link-tooltip.js +2 -4
- package/dist/components/styles/list-item.js +2 -4
- package/dist/components/styles/placeholder.js +2 -4
- package/dist/components/styles/prosemirror.js +2 -4
- package/dist/components/styles/table.js +2 -4
- package/dist/constants.js +1 -5
- package/dist/index.js +1 -4
- package/dist/loader.js +1 -46
- package/dist/utils.js +1 -62
- package/package.json +6 -6
|
@@ -9,7 +9,7 @@ export declare class BlockEdit extends LitElement {
|
|
|
9
9
|
get menu(): BlockEditMenu;
|
|
10
10
|
updated(): void;
|
|
11
11
|
disconnectedCallback(): void;
|
|
12
|
-
render: () => import("lit
|
|
12
|
+
render: () => import("lit").TemplateResult<1>;
|
|
13
13
|
hideMenu: () => HTMLElement;
|
|
14
14
|
showMenu: (elm: HTMLElement) => void;
|
|
15
15
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"blockEdit.d.ts","sourceRoot":"","sources":["../../../src/components/features/blockEdit.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,GAAG,CAAC;AAGlC,qBACa,SAAU,SAAQ,UAAU;;IAExC,MAAM,CAAC,MAAM,0BAqBX;IAGF,GAAG,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;IAGtB,EAAE,EAAE,OAAO,QAAQ,CAAC;IAGpB,IAAI,IAAI,kBAA+B;IAEvC,OAAO;IAMP,oBAAoB;IAIpB,MAAM,
|
|
1
|
+
{"version":3,"file":"blockEdit.d.ts","sourceRoot":"","sources":["../../../src/components/features/blockEdit.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,GAAG,CAAC;AAGlC,qBACa,SAAU,SAAQ,UAAU;;IAExC,MAAM,CAAC,MAAM,0BAqBX;IAGF,GAAG,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;IAGtB,EAAE,EAAE,OAAO,QAAQ,CAAC;IAGpB,IAAI,IAAI,kBAA+B;IAEvC,OAAO;IAMP,oBAAoB;IAIpB,MAAM,wCAkBJ;IAEF,QAAQ,oBAAoC;IAE5C,QAAQ,GAAI,KAAK,WAAW,UAW3B;CACD;AAED,qBAAa,eAAe;;IAG3B,EAAE,EAAE,OAAO,QAAQ,CAAC;gBAGR,GAAG,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,EAAE,OAAO,QAAQ;IAqBtD,MAAM,aAEL;IAED,OAAO,aAEN;CAyBD"}
|
|
@@ -1,76 +1,20 @@
|
|
|
1
|
-
var __decorate = (
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
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;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
7
|
-
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
8
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
9
|
-
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");
|
|
10
|
-
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
11
|
-
};
|
|
12
|
-
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
13
|
-
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
14
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
15
|
-
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");
|
|
16
|
-
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
17
|
-
};
|
|
18
|
-
var _BlockEdit_menu, _BlockHandleView_provider, _BlockHandleView_ctx, _BlockHandleView_content, _BlockHandleView_onAdd;
|
|
19
|
-
import { LitElement, css, html } from "lit";
|
|
20
|
-
import { customElement, property } from "lit/decorators.js";
|
|
21
|
-
import { dom } from "@omegagrid/core";
|
|
22
|
-
import { createRef, ref } from "lit/directives/ref.js";
|
|
23
|
-
let BlockEdit = class BlockEdit extends LitElement {
|
|
24
|
-
constructor() {
|
|
25
|
-
super(...arguments);
|
|
26
|
-
_BlockEdit_menu.set(this, createRef());
|
|
27
|
-
this.render = () => html `
|
|
1
|
+
var _BlockEdit_menu,_BlockHandleView_provider,_BlockHandleView_ctx,_BlockHandleView_content,_BlockHandleView_onAdd,__decorate=this&&this.__decorate||function(e,t,o,i){var n,s=arguments.length,r=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,i);else for(var l=e.length-1;l>=0;l--)(n=e[l])&&(r=(s<3?n(r):s>3?n(t,o,r):n(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r},__classPrivateFieldGet=this&&this.__classPrivateFieldGet||function(e,t,o,i){if("a"===o&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!i:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===o?i:"a"===o?i.call(e):i?i.value:t.get(e)},__classPrivateFieldSet=this&&this.__classPrivateFieldSet||function(e,t,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 t?e!==t||!n:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===i?n.call(e,o):n?n.value=o:t.set(e,o),o};import{LitElement,css,html}from"lit";import{customElement,property}from"lit/decorators.js";import{dom}from"@omegagrid/core";import{createRef,ref}from"lit/directives/ref.js";let BlockEdit=class extends LitElement{constructor(){super(...arguments),_BlockEdit_menu.set(this,createRef()),this.render=()=>html`
|
|
28
2
|
<og-button
|
|
29
3
|
icon="plus"
|
|
30
4
|
color="transparent"
|
|
31
|
-
@click=${()
|
|
32
|
-
this.dispatchEvent(new Event('add'));
|
|
33
|
-
}}>
|
|
5
|
+
@click=${()=>{this.dispatchEvent(new Event("add"))}}>
|
|
34
6
|
</og-button>
|
|
35
7
|
|
|
36
8
|
<og-button icon="grip-vertical" color="transparent"></og-button>
|
|
37
9
|
|
|
38
|
-
<og-markdown-block-edit-menu ${ref(__classPrivateFieldGet(this,
|
|
39
|
-
@mousedown=${
|
|
10
|
+
<og-markdown-block-edit-menu ${ref(__classPrivateFieldGet(this,_BlockEdit_menu,"f"))}
|
|
11
|
+
@mousedown=${e=>e.stopPropagation()}
|
|
40
12
|
style="display: none"
|
|
41
|
-
@run=${()
|
|
13
|
+
@run=${()=>this.hideMenu()}
|
|
42
14
|
.ctx="${this.ctx}"
|
|
43
15
|
.md="${this.md}">
|
|
44
16
|
</og-markdown-block-edit-menu>
|
|
45
|
-
|
|
46
|
-
this.hideMenu = () => dom.hideElement(this.menu);
|
|
47
|
-
this.showMenu = (elm) => {
|
|
48
|
-
if (!this.menu)
|
|
49
|
-
return;
|
|
50
|
-
const container = this.menu.parentElement;
|
|
51
|
-
const offset = dom.getElementOffset(elm, container);
|
|
52
|
-
dom.showElement(this.menu);
|
|
53
|
-
let top = offset.top + elm.offsetHeight + 4;
|
|
54
|
-
if (top + this.menu.offsetHeight > container.clientHeight) {
|
|
55
|
-
top = offset.top - this.menu.offsetHeight - 4;
|
|
56
|
-
}
|
|
57
|
-
dom.setPosition(this.menu, { t: top, l: offset.left });
|
|
58
|
-
document.addEventListener('mousedown', () => dom.hideElement(this.menu), { once: true });
|
|
59
|
-
};
|
|
60
|
-
}
|
|
61
|
-
get menu() { return __classPrivateFieldGet(this, _BlockEdit_menu, "f")?.value; }
|
|
62
|
-
updated() {
|
|
63
|
-
if (this.menu.parentNode == this.shadowRoot) {
|
|
64
|
-
document.body.appendChild(this.menu);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
disconnectedCallback() {
|
|
68
|
-
if (this.menu)
|
|
69
|
-
this.shadowRoot.appendChild(this.menu);
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
_BlockEdit_menu = new WeakMap();
|
|
73
|
-
BlockEdit.styles = css `
|
|
17
|
+
`,this.hideMenu=()=>dom.hideElement(this.menu),this.showMenu=e=>{if(!this.menu)return;const t=this.menu.parentElement,o=dom.getElementOffset(e,t);dom.showElement(this.menu);let i=o.top+e.offsetHeight+4;i+this.menu.offsetHeight>t.clientHeight&&(i=o.top-this.menu.offsetHeight-4),dom.setPosition(this.menu,{t:i,l:o.left}),document.addEventListener("mousedown",(()=>dom.hideElement(this.menu)),{once:!0})}}get menu(){return __classPrivateFieldGet(this,_BlockEdit_menu,"f")?.value}updated(){this.menu.parentNode==this.shadowRoot&&document.body.appendChild(this.menu)}disconnectedCallback(){this.menu&&this.shadowRoot.appendChild(this.menu)}};_BlockEdit_menu=new WeakMap,BlockEdit.styles=css`
|
|
74
18
|
* {
|
|
75
19
|
box-sizing: border-box;
|
|
76
20
|
}
|
|
@@ -91,69 +35,4 @@ BlockEdit.styles = css `
|
|
|
91
35
|
flex: 0;
|
|
92
36
|
text-align: center;
|
|
93
37
|
}
|
|
94
|
-
|
|
95
|
-
__decorate([
|
|
96
|
-
property({ type: Object })
|
|
97
|
-
], BlockEdit.prototype, "ctx", void 0);
|
|
98
|
-
__decorate([
|
|
99
|
-
property({ type: Object })
|
|
100
|
-
], BlockEdit.prototype, "md", void 0);
|
|
101
|
-
BlockEdit = __decorate([
|
|
102
|
-
customElement('og-markdown-block-edit')
|
|
103
|
-
], BlockEdit);
|
|
104
|
-
export { BlockEdit };
|
|
105
|
-
export class BlockHandleView {
|
|
106
|
-
constructor(ctx, md) {
|
|
107
|
-
_BlockHandleView_provider.set(this, void 0);
|
|
108
|
-
_BlockHandleView_ctx.set(this, void 0);
|
|
109
|
-
_BlockHandleView_content.set(this, void 0);
|
|
110
|
-
this.update = () => {
|
|
111
|
-
__classPrivateFieldGet(this, _BlockHandleView_provider, "f").update();
|
|
112
|
-
};
|
|
113
|
-
this.destroy = () => {
|
|
114
|
-
__classPrivateFieldGet(this, _BlockHandleView_provider, "f").destroy();
|
|
115
|
-
};
|
|
116
|
-
_BlockHandleView_onAdd.set(this, () => {
|
|
117
|
-
const ctx = __classPrivateFieldGet(this, _BlockHandleView_ctx, "f");
|
|
118
|
-
const view = ctx.get(this.md.core.editorViewCtx);
|
|
119
|
-
if (!view.hasFocus())
|
|
120
|
-
view.focus();
|
|
121
|
-
const { state, dispatch } = view;
|
|
122
|
-
const active = __classPrivateFieldGet(this, _BlockHandleView_provider, "f").active;
|
|
123
|
-
if (!active)
|
|
124
|
-
return;
|
|
125
|
-
const $pos = active.$pos;
|
|
126
|
-
const pos = $pos.pos + active.node.nodeSize;
|
|
127
|
-
let tr = state.tr.insert(pos, this.md.presets.commonmark.paragraphSchema.type(ctx).create());
|
|
128
|
-
tr = tr.setSelection(this.md.prose.state.TextSelection.near(tr.doc.resolve(pos)));
|
|
129
|
-
dispatch(tr.scrollIntoView());
|
|
130
|
-
__classPrivateFieldGet(this, _BlockHandleView_provider, "f").hide();
|
|
131
|
-
if (__classPrivateFieldGet(this, _BlockHandleView_content, "f").menu) {
|
|
132
|
-
const el = active.el.nextElementSibling;
|
|
133
|
-
if (el)
|
|
134
|
-
__classPrivateFieldGet(this, _BlockHandleView_content, "f").showMenu(el);
|
|
135
|
-
}
|
|
136
|
-
// ctx.get(menuAPI.key).show(tr.selection.from);
|
|
137
|
-
});
|
|
138
|
-
this.md = md;
|
|
139
|
-
__classPrivateFieldSet(this, _BlockHandleView_ctx, ctx, "f");
|
|
140
|
-
const content = dom.createElement('og-markdown-block-edit');
|
|
141
|
-
content.ctx = ctx;
|
|
142
|
-
content.md = md;
|
|
143
|
-
content.addEventListener('add', __classPrivateFieldGet(this, _BlockHandleView_onAdd, "f"));
|
|
144
|
-
__classPrivateFieldSet(this, _BlockHandleView_content, content, "f");
|
|
145
|
-
__classPrivateFieldSet(this, _BlockHandleView_provider, new md.plugins.block.BlockProvider({
|
|
146
|
-
ctx,
|
|
147
|
-
content,
|
|
148
|
-
getOffset: () => 10,
|
|
149
|
-
getPlacement: ({ active, blockDom }) => {
|
|
150
|
-
dom.setPosition(blockDom, { l: 0 });
|
|
151
|
-
dom.setSize(blockDom, { h: active.el.offsetHeight, w: 40 });
|
|
152
|
-
return 'left';
|
|
153
|
-
}
|
|
154
|
-
}), "f");
|
|
155
|
-
this.update();
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
_BlockHandleView_provider = new WeakMap(), _BlockHandleView_ctx = new WeakMap(), _BlockHandleView_content = new WeakMap(), _BlockHandleView_onAdd = new WeakMap();
|
|
159
|
-
//# sourceMappingURL=blockEdit.js.map
|
|
38
|
+
`,__decorate([property({type:Object})],BlockEdit.prototype,"ctx",void 0),__decorate([property({type:Object})],BlockEdit.prototype,"md",void 0),BlockEdit=__decorate([customElement("og-markdown-block-edit")],BlockEdit);export{BlockEdit};export class BlockHandleView{constructor(e,t){_BlockHandleView_provider.set(this,void 0),_BlockHandleView_ctx.set(this,void 0),_BlockHandleView_content.set(this,void 0),this.update=()=>{__classPrivateFieldGet(this,_BlockHandleView_provider,"f").update()},this.destroy=()=>{__classPrivateFieldGet(this,_BlockHandleView_provider,"f").destroy()},_BlockHandleView_onAdd.set(this,(()=>{const e=__classPrivateFieldGet(this,_BlockHandleView_ctx,"f"),t=e.get(this.md.core.editorViewCtx);t.hasFocus()||t.focus();const{state:o,dispatch:i}=t,n=__classPrivateFieldGet(this,_BlockHandleView_provider,"f").active;if(!n)return;const s=n.$pos.pos+n.node.nodeSize;let r=o.tr.insert(s,this.md.presets.commonmark.paragraphSchema.type(e).create());if(r=r.setSelection(this.md.prose.state.TextSelection.near(r.doc.resolve(s))),i(r.scrollIntoView()),__classPrivateFieldGet(this,_BlockHandleView_provider,"f").hide(),__classPrivateFieldGet(this,_BlockHandleView_content,"f").menu){const e=n.el.nextElementSibling;e&&__classPrivateFieldGet(this,_BlockHandleView_content,"f").showMenu(e)}})),this.md=t,__classPrivateFieldSet(this,_BlockHandleView_ctx,e,"f");const o=dom.createElement("og-markdown-block-edit");o.ctx=e,o.md=t,o.addEventListener("add",__classPrivateFieldGet(this,_BlockHandleView_onAdd,"f")),__classPrivateFieldSet(this,_BlockHandleView_content,o,"f"),__classPrivateFieldSet(this,_BlockHandleView_provider,new t.plugins.block.BlockProvider({ctx:e,content:o,getOffset:()=>10,getPlacement:({active:e,blockDom:t})=>(dom.setPosition(t,{l:0}),dom.setSize(t,{h:e.el.offsetHeight,w:40}),"left")}),"f"),this.update()}}_BlockHandleView_provider=new WeakMap,_BlockHandleView_ctx=new WeakMap,_BlockHandleView_content=new WeakMap,_BlockHandleView_onAdd=new WeakMap;
|
|
@@ -10,7 +10,7 @@ export declare class BlockEditMenu extends LitElement {
|
|
|
10
10
|
ctx: milkdown.ctx.Ctx;
|
|
11
11
|
md: typeof milkdown;
|
|
12
12
|
get menuItems(): BlockMenuItem[];
|
|
13
|
-
render: () => import("lit
|
|
13
|
+
render: () => import("lit").TemplateResult<1>;
|
|
14
14
|
}
|
|
15
15
|
export {};
|
|
16
16
|
//# sourceMappingURL=blockEditMenu.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"blockEditMenu.d.ts","sourceRoot":"","sources":["../../../src/components/features/blockEditMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,EAAkD,QAAQ,EAAO,MAAM,iBAAiB,CAAC;AAChG,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AAWzD,KAAK,aAAa,GAAG,QAAQ,GAAG;IAAC,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,IAAI,CAAA;CAAC,CAAC;AA8I1E,qBACa,aAAc,SAAQ,UAAU;;IAE5C,MAAM,CAAC,MAAM,0BAkBX;IAKF,GAAG,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;IAGtB,EAAE,EAAE,OAAO,QAAQ,CAAC;IAGpB,IAAI,SAAS,oBAA6E;IAmC1F,MAAM,
|
|
1
|
+
{"version":3,"file":"blockEditMenu.d.ts","sourceRoot":"","sources":["../../../src/components/features/blockEditMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,EAAkD,QAAQ,EAAO,MAAM,iBAAiB,CAAC;AAChG,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AAWzD,KAAK,aAAa,GAAG,QAAQ,GAAG;IAAC,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,IAAI,CAAA;CAAC,CAAC;AA8I1E,qBACa,aAAc,SAAQ,UAAU;;IAE5C,MAAM,CAAC,MAAM,0BAkBX;IAKF,GAAG,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;IAGtB,EAAE,EAAE,OAAO,QAAQ,CAAC;IAGpB,IAAI,SAAS,oBAA6E;IAmC1F,MAAM,wCAMJ;CACF"}
|
|
@@ -1,220 +1,10 @@
|
|
|
1
|
-
var __decorate = (
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
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;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
7
|
-
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
8
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
9
|
-
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");
|
|
10
|
-
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
11
|
-
};
|
|
12
|
-
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
13
|
-
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
14
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
15
|
-
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");
|
|
16
|
-
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
17
|
-
};
|
|
18
|
-
var _BlockEditMenu_menu, _BlockEditMenu_menuItems, _BlockEditMenu_createComponent, _BlockEditMenu_onTabSelect;
|
|
19
|
-
import { LitElement, css, html } from "lit";
|
|
20
|
-
import { customElement, property } from "lit/decorators.js";
|
|
21
|
-
import { msg } from "@omegagrid/localize";
|
|
22
|
-
import { dom } from "@omegagrid/core";
|
|
23
|
-
import { addBlockType, clearContentAndAddBlockType, clearContentAndSetBlockType, clearContentAndWrapInBlockType, clearRange } from "./utils";
|
|
24
|
-
const items = [
|
|
25
|
-
{ id: 'sectionText', title: msg('Text') },
|
|
26
|
-
{ id: 'sectionList', title: msg('List') },
|
|
27
|
-
{ id: 'sectionAdvanced', title: msg('Advanced') },
|
|
28
|
-
];
|
|
29
|
-
const createMenuItems = (md) => [
|
|
30
|
-
{ key: 'sectionText', value: msg('Text'), divider: true, type: 'label' },
|
|
31
|
-
{
|
|
32
|
-
key: 'text',
|
|
33
|
-
value: msg('Text'),
|
|
34
|
-
icon: 'text', onRun: ctx => {
|
|
35
|
-
const view = ctx.get(md.core.editorViewCtx);
|
|
36
|
-
const { dispatch, state } = view;
|
|
37
|
-
const command = clearContentAndSetBlockType(md.presets.commonmark.paragraphSchema.type(ctx));
|
|
38
|
-
command(state, dispatch);
|
|
39
|
-
}
|
|
40
|
-
}, ...(new Array(6).fill(0).map((_, i) => ({
|
|
41
|
-
key: `square${i + 1}`,
|
|
42
|
-
value: msg('Heading') + (i + 1),
|
|
43
|
-
icon: `square-${i + 1}`,
|
|
44
|
-
onRun: (ctx) => {
|
|
45
|
-
const view = ctx.get(md.core.editorViewCtx);
|
|
46
|
-
const { dispatch, state } = view;
|
|
47
|
-
const command = clearContentAndSetBlockType(md.presets.commonmark.headingSchema.type(ctx), { level: i + 1 });
|
|
48
|
-
command(state, dispatch);
|
|
49
|
-
}
|
|
50
|
-
}))), {
|
|
51
|
-
key: 'quote',
|
|
52
|
-
value: msg('Quote'),
|
|
53
|
-
icon: 'quote-right',
|
|
54
|
-
onRun: ctx => {
|
|
55
|
-
const view = ctx.get(md.core.editorViewCtx);
|
|
56
|
-
const { dispatch, state } = view;
|
|
57
|
-
const command = clearContentAndWrapInBlockType(md.presets.commonmark.blockquoteSchema.type(ctx));
|
|
58
|
-
command(state, dispatch);
|
|
59
|
-
}
|
|
60
|
-
}, {
|
|
61
|
-
key: 'divider',
|
|
62
|
-
value: msg('Divider'),
|
|
63
|
-
icon: 'horizontal-rule',
|
|
64
|
-
onRun: (ctx) => {
|
|
65
|
-
const view = ctx.get(md.core.editorViewCtx);
|
|
66
|
-
const { dispatch, state } = view;
|
|
67
|
-
const command = clearContentAndAddBlockType(md.presets.commonmark.hrSchema.type(ctx));
|
|
68
|
-
command(state, dispatch);
|
|
69
|
-
}
|
|
70
|
-
}, {
|
|
71
|
-
key: 'sectionList',
|
|
72
|
-
value: msg('List'),
|
|
73
|
-
divider: true,
|
|
74
|
-
type: 'label'
|
|
75
|
-
}, {
|
|
76
|
-
key: 'bulletList',
|
|
77
|
-
value: msg('Bullet List'),
|
|
78
|
-
icon: 'list',
|
|
79
|
-
onRun: (ctx) => {
|
|
80
|
-
const view = ctx.get(md.core.editorViewCtx);
|
|
81
|
-
const { dispatch, state } = view;
|
|
82
|
-
const command = clearContentAndWrapInBlockType(md.presets.commonmark.bulletListSchema.type(ctx));
|
|
83
|
-
command(state, dispatch);
|
|
84
|
-
}
|
|
85
|
-
}, {
|
|
86
|
-
key: 'orderedList',
|
|
87
|
-
value: msg('Ordered List'),
|
|
88
|
-
icon: 'list-ol',
|
|
89
|
-
onRun: (ctx) => {
|
|
90
|
-
const view = ctx.get(md.core.editorViewCtx);
|
|
91
|
-
const { dispatch, state } = view;
|
|
92
|
-
const command = clearContentAndWrapInBlockType(md.presets.commonmark.orderedListSchema.type(ctx));
|
|
93
|
-
command(state, dispatch);
|
|
94
|
-
}
|
|
95
|
-
}, {
|
|
96
|
-
key: 'todoList',
|
|
97
|
-
value: msg('Todo List'),
|
|
98
|
-
icon: 'list-check',
|
|
99
|
-
onRun: (ctx) => {
|
|
100
|
-
const view = ctx.get(md.core.editorViewCtx);
|
|
101
|
-
const { dispatch, state } = view;
|
|
102
|
-
const command = clearContentAndWrapInBlockType(md.presets.commonmark.listItemSchema.type(ctx), { checked: false });
|
|
103
|
-
command(state, dispatch);
|
|
104
|
-
}
|
|
105
|
-
}, {
|
|
106
|
-
key: 'sectionAdvanced',
|
|
107
|
-
value: msg('Advanced'),
|
|
108
|
-
divider: true,
|
|
109
|
-
type: 'label'
|
|
110
|
-
}, {
|
|
111
|
-
key: 'image',
|
|
112
|
-
value: msg('Image'),
|
|
113
|
-
icon: 'image',
|
|
114
|
-
onRun: (ctx) => {
|
|
115
|
-
const view = ctx.get(md.core.editorViewCtx);
|
|
116
|
-
const { dispatch, state } = view;
|
|
117
|
-
const command = clearContentAndAddBlockType(md.components.imageBlock.imageBlockSchema.type(ctx));
|
|
118
|
-
command(state, dispatch);
|
|
119
|
-
}
|
|
120
|
-
}, {
|
|
121
|
-
key: 'html',
|
|
122
|
-
value: msg('Raw HTML'),
|
|
123
|
-
icon: 'code',
|
|
124
|
-
onRun: (ctx) => {
|
|
125
|
-
const view = ctx.get(md.core.editorViewCtx);
|
|
126
|
-
const { dispatch, state } = view;
|
|
127
|
-
const tr = addBlockType(clearRange(state.tr), md.presets.commonmark.htmlSchema.type(ctx), null);
|
|
128
|
-
dispatch(tr.scrollIntoView());
|
|
129
|
-
requestAnimationFrame(() => {
|
|
130
|
-
const node = view.domAtPos(tr.selection.$anchor.pos)?.node;
|
|
131
|
-
if (node) {
|
|
132
|
-
const block = node.querySelector('og-markdown-html-block');
|
|
133
|
-
block?.startEdit();
|
|
134
|
-
}
|
|
135
|
-
});
|
|
136
|
-
}
|
|
137
|
-
}, {
|
|
138
|
-
key: 'code',
|
|
139
|
-
value: msg('Code'),
|
|
140
|
-
icon: 'code',
|
|
141
|
-
onRun: (ctx) => {
|
|
142
|
-
const view = ctx.get(md.core.editorViewCtx);
|
|
143
|
-
const { dispatch, state } = view;
|
|
144
|
-
const command = clearContentAndAddBlockType(md.presets.commonmark.codeBlockSchema.type(ctx));
|
|
145
|
-
command(state, dispatch);
|
|
146
|
-
}
|
|
147
|
-
}, {
|
|
148
|
-
key: 'table',
|
|
149
|
-
value: msg('Table'),
|
|
150
|
-
icon: 'table',
|
|
151
|
-
onRun: (ctx) => {
|
|
152
|
-
const view = ctx.get(md.core.editorViewCtx);
|
|
153
|
-
const { dispatch, state } = view;
|
|
154
|
-
const tr = clearRange(state.tr);
|
|
155
|
-
const table = md.presets.gfm.createTable(ctx, 3, 3);
|
|
156
|
-
tr.replaceSelectionWith(table);
|
|
157
|
-
const { from } = tr.selection;
|
|
158
|
-
const pos = from - table.nodeSize + 2;
|
|
159
|
-
dispatch(tr);
|
|
160
|
-
requestAnimationFrame(() => {
|
|
161
|
-
const selection = md.prose.state.NodeSelection.create(view.state.tr.doc, pos);
|
|
162
|
-
dispatch(view.state.tr.setSelection(selection).scrollIntoView());
|
|
163
|
-
});
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
];
|
|
167
|
-
let BlockEditMenu = class BlockEditMenu extends LitElement {
|
|
168
|
-
constructor() {
|
|
169
|
-
super(...arguments);
|
|
170
|
-
_BlockEditMenu_menu.set(this, void 0);
|
|
171
|
-
_BlockEditMenu_menuItems.set(this, void 0);
|
|
172
|
-
_BlockEditMenu_createComponent.set(this, (_id) => {
|
|
173
|
-
if (!__classPrivateFieldGet(this, _BlockEditMenu_menu, "f")) {
|
|
174
|
-
const menuItems = this.menuItems;
|
|
175
|
-
__classPrivateFieldSet(this, _BlockEditMenu_menu, dom.createElement('og-menu'), "f");
|
|
176
|
-
__classPrivateFieldGet(this, _BlockEditMenu_menu, "f").dynamicWidth = false;
|
|
177
|
-
__classPrivateFieldGet(this, _BlockEditMenu_menu, "f").disabledFocus = true;
|
|
178
|
-
__classPrivateFieldGet(this, _BlockEditMenu_menu, "f").style.width = '100%';
|
|
179
|
-
__classPrivateFieldGet(this, _BlockEditMenu_menu, "f").style.height = '100%';
|
|
180
|
-
__classPrivateFieldGet(this, _BlockEditMenu_menu, "f").style.border = 'none';
|
|
181
|
-
__classPrivateFieldGet(this, _BlockEditMenu_menu, "f").items = menuItems;
|
|
182
|
-
__classPrivateFieldGet(this, _BlockEditMenu_menu, "f").addEventListener('menu.select', (e) => {
|
|
183
|
-
const item = menuItems.find(item => item.key === e.item.key);
|
|
184
|
-
if (item?.onRun) {
|
|
185
|
-
item.onRun(this.ctx);
|
|
186
|
-
this.dispatchEvent(new Event('run'));
|
|
187
|
-
}
|
|
188
|
-
});
|
|
189
|
-
__classPrivateFieldGet(this, _BlockEditMenu_menu, "f").addEventListener('mousedown', (e) => {
|
|
190
|
-
e.stopPropagation();
|
|
191
|
-
e.preventDefault();
|
|
192
|
-
});
|
|
193
|
-
}
|
|
194
|
-
return __classPrivateFieldGet(this, _BlockEditMenu_menu, "f");
|
|
195
|
-
});
|
|
196
|
-
_BlockEditMenu_onTabSelect.set(this, (e) => {
|
|
197
|
-
if (__classPrivateFieldGet(this, _BlockEditMenu_menu, "f")?.list) {
|
|
198
|
-
const index = this.menuItems.findIndex(item => item.key === e.tab.id);
|
|
199
|
-
if (index > -1)
|
|
200
|
-
__classPrivateFieldGet(this, _BlockEditMenu_menu, "f").list.scrollToIndex(index);
|
|
201
|
-
}
|
|
202
|
-
});
|
|
203
|
-
this.render = () => html `
|
|
1
|
+
var _BlockEditMenu_menu,_BlockEditMenu_menuItems,_BlockEditMenu_createComponent,_BlockEditMenu_onTabSelect,__decorate=this&&this.__decorate||function(e,t,o,n){var i,s=arguments.length,c=s<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)c=Reflect.decorate(e,t,o,n);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(c=(s<3?i(c):s>3?i(t,o,c):i(t,o))||c);return s>3&&c&&Object.defineProperty(t,o,c),c},__classPrivateFieldGet=this&&this.__classPrivateFieldGet||function(e,t,o,n){if("a"===o&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===o?n:"a"===o?n.call(e):n?n.value:t.get(e)},__classPrivateFieldSet=this&&this.__classPrivateFieldSet||function(e,t,o,n,i){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!i:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?i.call(e,o):i?i.value=o:t.set(e,o),o};import{LitElement,css,html}from"lit";import{customElement,property}from"lit/decorators.js";import{msg}from"@omegagrid/localize";import{dom}from"@omegagrid/core";import{addBlockType,clearContentAndAddBlockType,clearContentAndSetBlockType,clearContentAndWrapInBlockType,clearRange}from"./utils";const items=[{id:"sectionText",title:msg("Text")},{id:"sectionList",title:msg("List")},{id:"sectionAdvanced",title:msg("Advanced")}],createMenuItems=e=>[{key:"sectionText",value:msg("Text"),divider:!0,type:"label"},{key:"text",value:msg("Text"),icon:"text",onRun:t=>{const o=t.get(e.core.editorViewCtx),{dispatch:n,state:i}=o;clearContentAndSetBlockType(e.presets.commonmark.paragraphSchema.type(t))(i,n)}},...new Array(6).fill(0).map(((t,o)=>({key:`square${o+1}`,value:msg("Heading")+(o+1),icon:`square-${o+1}`,onRun:t=>{const n=t.get(e.core.editorViewCtx),{dispatch:i,state:s}=n;clearContentAndSetBlockType(e.presets.commonmark.headingSchema.type(t),{level:o+1})(s,i)}}))),{key:"quote",value:msg("Quote"),icon:"quote-right",onRun:t=>{const o=t.get(e.core.editorViewCtx),{dispatch:n,state:i}=o;clearContentAndWrapInBlockType(e.presets.commonmark.blockquoteSchema.type(t))(i,n)}},{key:"divider",value:msg("Divider"),icon:"horizontal-rule",onRun:t=>{const o=t.get(e.core.editorViewCtx),{dispatch:n,state:i}=o;clearContentAndAddBlockType(e.presets.commonmark.hrSchema.type(t))(i,n)}},{key:"sectionList",value:msg("List"),divider:!0,type:"label"},{key:"bulletList",value:msg("Bullet List"),icon:"list",onRun:t=>{const o=t.get(e.core.editorViewCtx),{dispatch:n,state:i}=o;clearContentAndWrapInBlockType(e.presets.commonmark.bulletListSchema.type(t))(i,n)}},{key:"orderedList",value:msg("Ordered List"),icon:"list-ol",onRun:t=>{const o=t.get(e.core.editorViewCtx),{dispatch:n,state:i}=o;clearContentAndWrapInBlockType(e.presets.commonmark.orderedListSchema.type(t))(i,n)}},{key:"todoList",value:msg("Todo List"),icon:"list-check",onRun:t=>{const o=t.get(e.core.editorViewCtx),{dispatch:n,state:i}=o;clearContentAndWrapInBlockType(e.presets.commonmark.listItemSchema.type(t),{checked:!1})(i,n)}},{key:"sectionAdvanced",value:msg("Advanced"),divider:!0,type:"label"},{key:"image",value:msg("Image"),icon:"image",onRun:t=>{const o=t.get(e.core.editorViewCtx),{dispatch:n,state:i}=o;clearContentAndAddBlockType(e.components.imageBlock.imageBlockSchema.type(t))(i,n)}},{key:"html",value:msg("Raw HTML"),icon:"code",onRun:t=>{const o=t.get(e.core.editorViewCtx),{dispatch:n,state:i}=o,s=addBlockType(clearRange(i.tr),e.presets.commonmark.htmlSchema.type(t),null);n(s.scrollIntoView()),requestAnimationFrame((()=>{const e=o.domAtPos(s.selection.$anchor.pos)?.node;if(e){const t=e.querySelector("og-markdown-html-block");t?.startEdit()}}))}},{key:"code",value:msg("Code"),icon:"code",onRun:t=>{const o=t.get(e.core.editorViewCtx),{dispatch:n,state:i}=o;clearContentAndAddBlockType(e.presets.commonmark.codeBlockSchema.type(t))(i,n)}},{key:"table",value:msg("Table"),icon:"table",onRun:t=>{const o=t.get(e.core.editorViewCtx),{dispatch:n,state:i}=o,s=clearRange(i.tr),c=e.presets.gfm.createTable(t,3,3);s.replaceSelectionWith(c);const{from:a}=s.selection,r=a-c.nodeSize+2;n(s),requestAnimationFrame((()=>{const t=e.prose.state.NodeSelection.create(o.state.tr.doc,r);n(o.state.tr.setSelection(t).scrollIntoView())}))}}];let BlockEditMenu=class extends LitElement{constructor(){super(...arguments),_BlockEditMenu_menu.set(this,void 0),_BlockEditMenu_menuItems.set(this,void 0),_BlockEditMenu_createComponent.set(this,(e=>{if(!__classPrivateFieldGet(this,_BlockEditMenu_menu,"f")){const e=this.menuItems;__classPrivateFieldSet(this,_BlockEditMenu_menu,dom.createElement("og-menu"),"f"),__classPrivateFieldGet(this,_BlockEditMenu_menu,"f").dynamicWidth=!1,__classPrivateFieldGet(this,_BlockEditMenu_menu,"f").disabledFocus=!0,__classPrivateFieldGet(this,_BlockEditMenu_menu,"f").style.width="100%",__classPrivateFieldGet(this,_BlockEditMenu_menu,"f").style.height="100%",__classPrivateFieldGet(this,_BlockEditMenu_menu,"f").style.border="none",__classPrivateFieldGet(this,_BlockEditMenu_menu,"f").items=e,__classPrivateFieldGet(this,_BlockEditMenu_menu,"f").addEventListener("menu.select",(t=>{const o=e.find((e=>e.key===t.item.key));o?.onRun&&(o.onRun(this.ctx),this.dispatchEvent(new Event("run")))})),__classPrivateFieldGet(this,_BlockEditMenu_menu,"f").addEventListener("mousedown",(e=>{e.stopPropagation(),e.preventDefault()}))}return __classPrivateFieldGet(this,_BlockEditMenu_menu,"f")})),_BlockEditMenu_onTabSelect.set(this,(e=>{if(__classPrivateFieldGet(this,_BlockEditMenu_menu,"f")?.list){const t=this.menuItems.findIndex((t=>t.key===e.tab.id));t>-1&&__classPrivateFieldGet(this,_BlockEditMenu_menu,"f").list.scrollToIndex(t)}})),this.render=()=>html`
|
|
204
2
|
<og-tabcontainer
|
|
205
|
-
.createComponent="${__classPrivateFieldGet(this,
|
|
3
|
+
.createComponent="${__classPrivateFieldGet(this,_BlockEditMenu_createComponent,"f")}"
|
|
206
4
|
.items="${items}"
|
|
207
|
-
@tab.select="${__classPrivateFieldGet(this,
|
|
5
|
+
@tab.select="${__classPrivateFieldGet(this,_BlockEditMenu_onTabSelect,"f")}">
|
|
208
6
|
</og-tabcontainer>
|
|
209
|
-
|
|
210
|
-
}
|
|
211
|
-
get menuItems() { return __classPrivateFieldGet(this, _BlockEditMenu_menuItems, "f") ?? (__classPrivateFieldSet(this, _BlockEditMenu_menuItems, createMenuItems(this.md), "f")); }
|
|
212
|
-
};
|
|
213
|
-
_BlockEditMenu_menu = new WeakMap();
|
|
214
|
-
_BlockEditMenu_menuItems = new WeakMap();
|
|
215
|
-
_BlockEditMenu_createComponent = new WeakMap();
|
|
216
|
-
_BlockEditMenu_onTabSelect = new WeakMap();
|
|
217
|
-
BlockEditMenu.styles = css `
|
|
7
|
+
`}get menuItems(){return __classPrivateFieldGet(this,_BlockEditMenu_menuItems,"f")??__classPrivateFieldSet(this,_BlockEditMenu_menuItems,createMenuItems(this.md),"f")}};_BlockEditMenu_menu=new WeakMap,_BlockEditMenu_menuItems=new WeakMap,_BlockEditMenu_createComponent=new WeakMap,_BlockEditMenu_onTabSelect=new WeakMap,BlockEditMenu.styles=css`
|
|
218
8
|
* {
|
|
219
9
|
box-sizing: border-box;
|
|
220
10
|
}
|
|
@@ -232,15 +22,4 @@ BlockEditMenu.styles = css `
|
|
|
232
22
|
width: 100%;
|
|
233
23
|
height: 100%;
|
|
234
24
|
}
|
|
235
|
-
|
|
236
|
-
__decorate([
|
|
237
|
-
property({ type: Object })
|
|
238
|
-
], BlockEditMenu.prototype, "ctx", void 0);
|
|
239
|
-
__decorate([
|
|
240
|
-
property({ type: Object })
|
|
241
|
-
], BlockEditMenu.prototype, "md", void 0);
|
|
242
|
-
BlockEditMenu = __decorate([
|
|
243
|
-
customElement('og-markdown-block-edit-menu')
|
|
244
|
-
], BlockEditMenu);
|
|
245
|
-
export { BlockEditMenu };
|
|
246
|
-
//# sourceMappingURL=blockEditMenu.js.map
|
|
25
|
+
`,__decorate([property({type:Object})],BlockEditMenu.prototype,"ctx",void 0),__decorate([property({type:Object})],BlockEditMenu.prototype,"md",void 0),BlockEditMenu=__decorate([customElement("og-markdown-block-edit-menu")],BlockEditMenu);export{BlockEditMenu};
|
|
@@ -1,135 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { CodeBlock } from '@omegagrid/code';
|
|
3
|
-
const DEFAULT_LANGUAGE = 'plaintext';
|
|
4
|
-
export class CodeEditorBlock {
|
|
5
|
-
get editor() { return this.dom?.editor?.editor; }
|
|
6
|
-
get model() { return this.editor?.getModel(); }
|
|
7
|
-
constructor(md, node, view, getPos) {
|
|
8
|
-
this.md = md;
|
|
9
|
-
this.node = node;
|
|
10
|
-
this.view = view;
|
|
11
|
-
this.getPos = getPos;
|
|
12
|
-
this.updating = false;
|
|
13
|
-
this.languageName = 'plaintext';
|
|
14
|
-
this._onChange = (e) => {
|
|
15
|
-
if (this.updating)
|
|
16
|
-
return;
|
|
17
|
-
const model = e.editor.getModel();
|
|
18
|
-
const tr = this.view.state.tr;
|
|
19
|
-
this.view.dispatch(tr.setNodeAttribute(this.getPos() ?? 0, 'content', model.getValue()));
|
|
20
|
-
// const selection = e.editor.getSelection();
|
|
21
|
-
// const selFrom = offset + model.getOffsetAt(selection.getStartPosition());
|
|
22
|
-
// const selTo = offset + model.getOffsetAt(selection.getEndPosition());
|
|
23
|
-
// if (e.changes?.length) {
|
|
24
|
-
// const tr = this.view.state.tr;
|
|
25
|
-
// e.changes.forEach(change => {
|
|
26
|
-
// const { rangeOffset, rangeLength, text } = change;
|
|
27
|
-
// const from = offset + rangeOffset;
|
|
28
|
-
// const to = from + rangeLength;
|
|
29
|
-
// if (text.length) {
|
|
30
|
-
// tr.replaceWith(from, to, this.view.state.schema.text(text));
|
|
31
|
-
// } else {
|
|
32
|
-
// tr.delete(from, to);
|
|
33
|
-
// }
|
|
34
|
-
// offset += text.length - rangeLength;
|
|
35
|
-
// });
|
|
36
|
-
// tr.setSelection(this.md.prose.state.TextSelection.create(tr.doc, selFrom, selTo))
|
|
37
|
-
// this.view.dispatch(tr)
|
|
38
|
-
// }
|
|
39
|
-
};
|
|
40
|
-
this.setLanguage = (language) => {
|
|
41
|
-
this.view.dispatch(this.view.state.tr.setNodeAttribute(this.getPos() ?? 0, 'language', language));
|
|
42
|
-
};
|
|
43
|
-
this.dom = this.createComponent();
|
|
44
|
-
this.updateLanguage();
|
|
45
|
-
}
|
|
46
|
-
createComponent() {
|
|
47
|
-
const component = this.view.editable
|
|
48
|
-
? dom.createElement('og-code-block')
|
|
49
|
-
: dom.createElement('og-code-view');
|
|
50
|
-
component.content = this.node.textContent;
|
|
51
|
-
if (component instanceof CodeBlock) {
|
|
52
|
-
component.dynamicHeight = true;
|
|
53
|
-
component.editorOptions = {
|
|
54
|
-
minimap: { enabled: false },
|
|
55
|
-
stickyScroll: { enabled: false },
|
|
56
|
-
};
|
|
57
|
-
// dom.setSize(component, {h: 500});
|
|
58
|
-
component.addEventListener('code.change', this._onChange);
|
|
59
|
-
component.addEventListener('changeLanguage', (e) => this.setLanguage(e.value));
|
|
60
|
-
}
|
|
61
|
-
else {
|
|
62
|
-
component.copy = true;
|
|
63
|
-
}
|
|
64
|
-
return component;
|
|
65
|
-
}
|
|
66
|
-
setSelection(anchor, head) {
|
|
67
|
-
if (!this.dom?.isConnected)
|
|
68
|
-
return;
|
|
69
|
-
this.dom.focus();
|
|
70
|
-
this.updating = true;
|
|
71
|
-
const model = this.model;
|
|
72
|
-
if (model) {
|
|
73
|
-
const start = model.getPositionAt(anchor);
|
|
74
|
-
const end = model.getPositionAt(head);
|
|
75
|
-
this.editor.setSelection({
|
|
76
|
-
startLineNumber: start.lineNumber,
|
|
77
|
-
startColumn: start.column,
|
|
78
|
-
endLineNumber: end.lineNumber,
|
|
79
|
-
endColumn: end.column
|
|
80
|
-
});
|
|
81
|
-
}
|
|
82
|
-
this.updating = false;
|
|
83
|
-
}
|
|
84
|
-
update(node) {
|
|
85
|
-
if (node.type !== this.node.type)
|
|
86
|
-
return false;
|
|
87
|
-
if (this.updating)
|
|
88
|
-
return true;
|
|
89
|
-
this.node = node;
|
|
90
|
-
this.updateLanguage();
|
|
91
|
-
this.dom.content = node.textContent;
|
|
92
|
-
return true;
|
|
93
|
-
}
|
|
94
|
-
selectNode() {
|
|
95
|
-
// this.component.selected = true
|
|
96
|
-
this.dom.focus();
|
|
97
|
-
}
|
|
98
|
-
deselectNode() {
|
|
99
|
-
// this.component.selected = false
|
|
100
|
-
}
|
|
101
|
-
stopEvent() {
|
|
102
|
-
return true;
|
|
103
|
-
}
|
|
104
|
-
destroy() {
|
|
105
|
-
// this.component.destroy()
|
|
106
|
-
}
|
|
107
|
-
updateLanguage() {
|
|
108
|
-
this.languageName = this.node.attrs.language || DEFAULT_LANGUAGE;
|
|
109
|
-
this.dom.language = this.languageName;
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
export const defaultCodeEditorConfig = {};
|
|
113
|
-
export function createCodeBlockConfig(md) {
|
|
114
|
-
return md.utils.$ctx(defaultCodeEditorConfig, 'codeEditorConfigCtx');
|
|
115
|
-
}
|
|
116
|
-
export function createCodeBlockView(md) {
|
|
117
|
-
return md.utils.$view(md.presets.commonmark.codeBlockSchema.node, _ctx => {
|
|
118
|
-
// const config = ctx.get('codeBlockConfigCtx')
|
|
119
|
-
// const languageLoader = new LanguageLoader(config.languages)
|
|
120
|
-
return (node, view, getPos) => new CodeEditorBlock(md, node, view, getPos);
|
|
121
|
-
});
|
|
122
|
-
}
|
|
123
|
-
// function computeChange(oldVal: string, newVal: string): { from: number; to: number; text: string } | null {
|
|
124
|
-
// if (oldVal === newVal) return null;
|
|
125
|
-
// let start = 0;
|
|
126
|
-
// let oldEnd = oldVal.length;
|
|
127
|
-
// let newEnd = newVal.length;
|
|
128
|
-
// while (start < oldEnd && oldVal.charCodeAt(start) === newVal.charCodeAt(start)) ++start;
|
|
129
|
-
// while (oldEnd > start && newEnd > start && oldVal.charCodeAt(oldEnd - 1) === newVal.charCodeAt(newEnd - 1)) {
|
|
130
|
-
// oldEnd--;
|
|
131
|
-
// newEnd--;
|
|
132
|
-
// }
|
|
133
|
-
// return {from: start, to: oldEnd, text: newVal.slice(start, newEnd)};
|
|
134
|
-
// }
|
|
135
|
-
//# sourceMappingURL=codeBlock.js.map
|
|
1
|
+
import{dom}from"@omegagrid/core";import{CodeBlock}from"@omegagrid/code";const DEFAULT_LANGUAGE="plaintext";export class CodeEditorBlock{get editor(){return this.dom?.editor?.editor}get model(){return this.editor?.getModel()}constructor(t,e,o,i){this.md=t,this.node=e,this.view=o,this.getPos=i,this.updating=!1,this.languageName="plaintext",this._onChange=t=>{if(this.updating)return;const e=t.editor.getModel(),o=this.view.state.tr;this.view.dispatch(o.setNodeAttribute(this.getPos()??0,"content",e.getValue()))},this.setLanguage=t=>{this.view.dispatch(this.view.state.tr.setNodeAttribute(this.getPos()??0,"language",t))},this.dom=this.createComponent(),this.updateLanguage()}createComponent(){const t=this.view.editable?dom.createElement("og-code-block"):dom.createElement("og-code-view");return t.content=this.node.textContent,t instanceof CodeBlock?(t.dynamicHeight=!0,t.editorOptions={minimap:{enabled:!1},stickyScroll:{enabled:!1}},t.addEventListener("code.change",this._onChange),t.addEventListener("changeLanguage",(t=>this.setLanguage(t.value)))):t.copy=!0,t}setSelection(t,e){if(!this.dom?.isConnected)return;this.dom.focus(),this.updating=!0;const o=this.model;if(o){const i=o.getPositionAt(t),n=o.getPositionAt(e);this.editor.setSelection({startLineNumber:i.lineNumber,startColumn:i.column,endLineNumber:n.lineNumber,endColumn:n.column})}this.updating=!1}update(t){return t.type===this.node.type&&(this.updating||(this.node=t,this.updateLanguage(),this.dom.content=t.textContent),!0)}selectNode(){this.dom.focus()}deselectNode(){}stopEvent(){return!0}destroy(){}updateLanguage(){this.languageName=this.node.attrs.language||"plaintext",this.dom.language=this.languageName}}export const defaultCodeEditorConfig={};export function createCodeBlockConfig(t){return t.utils.$ctx(defaultCodeEditorConfig,"codeEditorConfigCtx")}export function createCodeBlockView(t){return t.utils.$view(t.presets.commonmark.codeBlockSchema.node,(e=>(e,o,i)=>new CodeEditorBlock(t,e,o,i)))}
|
|
@@ -15,7 +15,7 @@ export declare class HtmlBlockComponent extends LitElement {
|
|
|
15
15
|
startEdit: () => void;
|
|
16
16
|
constructor();
|
|
17
17
|
commit(): void;
|
|
18
|
-
render: () => import("lit-html/directive").DirectiveResult<typeof import("lit
|
|
18
|
+
render: () => import("lit-html/development/directive").DirectiveResult<typeof import("lit/directives/unsafe-html.js").UnsafeHTMLDirective>;
|
|
19
19
|
}
|
|
20
20
|
export declare class HtmlBlock implements NodeView {
|
|
21
21
|
md: typeof milkdown;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"htmlBlock.d.ts","sourceRoot":"","sources":["../../../src/components/features/htmlBlock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0CAA0C,CAAC;AACrE,OAAO,EAAO,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,qBACa,kBAAmB,SAAQ,UAAU;;IAEjD,MAAM,CAAC,MAAM,0BA6BX;IAIF,IACI,OAAO,IACM,MAAM,CADe;IACtC,IAAI,OAAO,CAAC,GAAG,EAAE,MAAM,EAGtB;IAGD,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAGhB,MAAM,EAAE,SAAS,CAAC;IAElB,SAAS,aAEP;;IAOF,MAAM;IAMN,MAAM,
|
|
1
|
+
{"version":3,"file":"htmlBlock.d.ts","sourceRoot":"","sources":["../../../src/components/features/htmlBlock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0CAA0C,CAAC;AACrE,OAAO,EAAO,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,qBACa,kBAAmB,SAAQ,UAAU;;IAEjD,MAAM,CAAC,MAAM,0BA6BX;IAIF,IACI,OAAO,IACM,MAAM,CADe;IACtC,IAAI,OAAO,CAAC,GAAG,EAAE,MAAM,EAGtB;IAGD,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAGhB,MAAM,EAAE,SAAS,CAAC;IAElB,SAAS,aAEP;;IAOF,MAAM;IAMN,MAAM,qIAyBuB;CAE7B;AAGD,qBAAa,SAAU,YAAW,QAAQ;IAOjC,EAAE,EAAE,OAAO,QAAQ;IACnB,IAAI,EAAE,IAAI;IACV,IAAI,EAAE,UAAU;IAChB,MAAM,EAAE,MAAM,MAAM,GAAG,SAAS;IATxC,GAAG,EAAE,kBAAkB,CAAC;IACxB,OAAO,CAAC,QAAQ,CAAS;gBAKjB,EAAE,EAAE,OAAO,QAAQ,EACnB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,MAAM,MAAM,GAAG,SAAS;IAQxC,SAAS,GAAI,GAAG,MAAM,CAAC,WAAW,UAIjC;IAED,MAAM,CAAC,IAAI,EAAE,IAAI;IAQjB,UAAU;IAKV,YAAY;IAIZ,SAAS;IAIT,OAAO;CAyEP;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AACrD,eAAO,MAAM,uBAAuB,EAAS,gBAAgB,CAAC;AAE9D,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,OAAO,QAAQ,gEAExD;AAED,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,OAAO,QAAQ,6HAQtD"}
|