@omegagrid/markdown 0.9.48 → 0.9.50
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/markdownEditor.d.ts +2 -0
- package/dist/components/markdownEditor.d.ts.map +1 -1
- package/dist/components/markdownEditor.js +3 -3
- package/dist/components/markdownEditor.js.map +1 -1
- package/dist/components/markdownEditor.style.d.ts.map +1 -1
- package/dist/components/markdownEditor.style.js +10 -1
- package/dist/components/markdownEditor.style.js.map +1 -1
- package/package.json +6 -6
|
@@ -26,7 +26,9 @@ export declare class MarkdownEditor extends LitElement implements Layout {
|
|
|
26
26
|
connectedCallback(): void;
|
|
27
27
|
updateWidth(): void;
|
|
28
28
|
_onChange: (markdown: string, prevMarkdown: string) => void;
|
|
29
|
+
firstUpdated(): void;
|
|
29
30
|
updated(): Promise<void>;
|
|
31
|
+
updateSlider(): void;
|
|
30
32
|
disconnectedCallback(): void;
|
|
31
33
|
render: () => import("lit").TemplateResult<1>;
|
|
32
34
|
layout(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"markdownEditor.d.ts","sourceRoot":"","sources":["../../src/components/markdownEditor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,kBAAkB,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AAEzD,qBAAa,iBAAkB,SAAQ,KAAK;IAC3C,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,CAAC,EAAE,iBAAiB,CAAC;IAC9B,QAAQ,CAAC,SAAS,EAAE,YAAY,CAAC;gBAErB,IAAI,EAAE,OAAO,CAAC,iBAAiB,CAAC;CAI5C;AAED,qBACa,cAAe,SAAQ,UAAW,YAAW,MAAM;;IAE/D,MAAM,CAAC,MAAM,4BAAsB;IAGnC,IACI,OAAO,IACM,MAAM,CADe;IACtC,IAAI,OAAO,CAAC,GAAG,EAAE,MAAM,EAKtB;IAGD,eAAe,SAAO;IAGtB,gBAAgB,EAAE,kBAAkB,CAAU;IAG9C,QAAQ,UAAS;IAGjB,SAAS,EAAE,cAAc,CAAC;IAG1B,MAAM,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"markdownEditor.d.ts","sourceRoot":"","sources":["../../src/components/markdownEditor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,kBAAkB,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AAEzD,qBAAa,iBAAkB,SAAQ,KAAK;IAC3C,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,CAAC,EAAE,iBAAiB,CAAC;IAC9B,QAAQ,CAAC,SAAS,EAAE,YAAY,CAAC;gBAErB,IAAI,EAAE,OAAO,CAAC,iBAAiB,CAAC;CAI5C;AAED,qBACa,cAAe,SAAQ,UAAW,YAAW,MAAM;;IAE/D,MAAM,CAAC,MAAM,4BAAsB;IAGnC,IACI,OAAO,IACM,MAAM,CADe;IACtC,IAAI,OAAO,CAAC,GAAG,EAAE,MAAM,EAKtB;IAGD,eAAe,SAAO;IAGtB,gBAAgB,EAAE,kBAAkB,CAAU;IAG9C,QAAQ,UAAS;IAGjB,SAAS,EAAE,cAAc,CAAC;IAG1B,MAAM,EAAE,MAAM,CAAC;IAKf,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAG1C,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,GAAC,MAAM,CAAC;IAIzD,IAAI,WAAW,IAAiD,WAAW,CAAE;IAC7E,IAAI,MAAM,yBAA0B;;IAwBpC,gBAAgB,CAAC,QAAQ,EAAE,MAAM;IAOjC,iBAAiB;IAKjB,WAAW;IAKX,SAAS,GAAI,UAAU,MAAM,EAAE,cAAc,MAAM,UAGlD;IAED,YAAY;IAkBN,OAAO;IAab,YAAY;IAUZ,oBAAoB;IAOpB,MAAM,wCAMJ;IAEF,MAAM;CAEN"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
var _MarkdownEditor_content,_MarkdownEditor_editor,__decorate=this&&this.__decorate||function(t,e,r,o){var i,
|
|
1
|
+
var _MarkdownEditor_content,_MarkdownEditor_mouseIn,_MarkdownEditor_editor,__decorate=this&&this.__decorate||function(t,e,r,o){var i,d=arguments.length,n=d<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,r,o);else for(var s=t.length-1;s>=0;s--)(i=t[s])&&(n=(d<3?i(n):d>3?i(e,r,n):i(e,r))||n);return d>3&&n&&Object.defineProperty(e,r,n),n},__classPrivateFieldGet=this&&this.__classPrivateFieldGet||function(t,e,r,o){if("a"===r&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!o:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?o:"a"===r?o.call(t):o?o.value:e.get(t)},__classPrivateFieldSet=this&&this.__classPrivateFieldSet||function(t,e,r,o,i){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!i:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?i.call(t,r):i?i.value=r:e.set(t,r),r};import{dom,events}from"@omegagrid/core";import{LitElement,html}from"lit";import{customElement,query,property}from"lit/decorators.js";import{style}from"./markdownEditor.style";import styles from"./styles";import{createEditor}from"../utils";export class MarkdownLinkEvent extends Event{constructor(t){super("markdown.link",{bubbles:!0,composed:!0,cancelable:!0}),Object.assign(this,t)}}let MarkdownEditor=class extends LitElement{get content(){return __classPrivateFieldGet(this,_MarkdownEditor_content,"f")}set content(t){__classPrivateFieldSet(this,_MarkdownEditor_content,t,"f"),__classPrivateFieldGet(this,_MarkdownEditor_editor,"f")?.destroy(),__classPrivateFieldSet(this,_MarkdownEditor_editor,null,"f"),this.requestUpdate()}get milkdownElm(){return this.container.firstElementChild}get editor(){return __classPrivateFieldGet(this,_MarkdownEditor_editor,"f")}constructor(){super(),_MarkdownEditor_content.set(this,void 0),this.maxContentWidth=800,this.contentAlignment="left",this.readOnly=!1,_MarkdownEditor_mouseIn.set(this,!1),_MarkdownEditor_editor.set(this,void 0),this._onChange=(t,e)=>{__classPrivateFieldSet(this,_MarkdownEditor_content,t,"f"),this.dispatchEvent(new events.ChangeEvent({value:t,oldValue:e}))},this.render=()=>html`
|
|
2
2
|
<style>
|
|
3
3
|
.ProseMirror.editor { max-width: ${this.maxContentWidth}px; }
|
|
4
4
|
</style>
|
|
5
5
|
<div id="container" spellcheck="false"></div>
|
|
6
|
-
<og-slider direction="vertical"></og-slider>
|
|
7
|
-
`,dom.on(this,"click","a",((t,e)=>{if(!this.dispatchEvent(new MarkdownLinkEvent({href:e.getAttribute("href"),a:e,origEvent:t})))return void t.preventDefault();const r=e.getAttribute("href");r&&r.startsWith("#")&&(t.preventDefault(),this.scrollToSelector(r))}))}scrollToSelector(t){const e=this.milkdownElm.querySelector(t);e&&(this.milkdownElm.scrollTop=e.offsetTop,this.slider.updatePosition())}connectedCallback(){super.connectedCallback(),this.requestUpdate()}updateWidth(){const t=Math.min(this.maxContentWidth,this.clientWidth);this.milkdownElm.style.width=`${t}px`}async updated(){__classPrivateFieldGet(this,_MarkdownEditor_editor,"f")||(__classPrivateFieldSet(this,_MarkdownEditor_editor,await createEditor({container:this.container,content:this.content,readOnly:this.readOnly,onUpload:this.onUpload,onChange:this._onChange,modifyImageUrl:this.modifyImageUrl}),"f"),this.slider.attachElement(this.milkdownElm))}disconnectedCallback(){super.disconnectedCallback(),__classPrivateFieldGet(this,_MarkdownEditor_editor,"f")?.destroy(),__classPrivateFieldSet(this,_MarkdownEditor_editor,null,"f"),dom.empty(this.container)}layout(){}};_MarkdownEditor_content=new WeakMap,_MarkdownEditor_editor=new WeakMap,MarkdownEditor.styles=[style,...styles],__decorate([property({type:String})],MarkdownEditor.prototype,"content",null),__decorate([property({type:Number})],MarkdownEditor.prototype,"maxContentWidth",void 0),__decorate([property({type:String,reflect:!0})],MarkdownEditor.prototype,"contentAlignment",void 0),__decorate([property({type:Boolean,reflect:!0})],MarkdownEditor.prototype,"readOnly",void 0),__decorate([query("#container")],MarkdownEditor.prototype,"container",void 0),__decorate([query("og-slider")],MarkdownEditor.prototype,"slider",void 0),__decorate([property({type:Object})],MarkdownEditor.prototype,"onUpload",void 0),__decorate([property({type:Object})],MarkdownEditor.prototype,"modifyImageUrl",void 0),MarkdownEditor=__decorate([customElement("og-markdown-editor")],MarkdownEditor);export{MarkdownEditor};
|
|
6
|
+
<og-slider direction="vertical" hidden></og-slider>
|
|
7
|
+
`,dom.on(this,"click","a",((t,e)=>{if(!this.dispatchEvent(new MarkdownLinkEvent({href:e.getAttribute("href"),a:e,origEvent:t})))return void t.preventDefault();const r=e.getAttribute("href");r&&r.startsWith("#")&&(t.preventDefault(),this.scrollToSelector(r))}))}scrollToSelector(t){const e=this.milkdownElm.querySelector(t);e&&(this.milkdownElm.scrollTop=e.offsetTop,this.slider.updatePosition())}connectedCallback(){super.connectedCallback(),this.requestUpdate()}updateWidth(){const t=Math.min(this.maxContentWidth,this.clientWidth);this.milkdownElm.style.width=`${t}px`}firstUpdated(){this.slider.hide(),this.addEventListener("mouseenter",(()=>{__classPrivateFieldSet(this,_MarkdownEditor_mouseIn,!0,"f"),this.updateSlider()})),this.addEventListener("mouseleave",(()=>{__classPrivateFieldSet(this,_MarkdownEditor_mouseIn,!1,"f"),this.updateSlider()})),this.slider.addEventListener("slideEnd",(()=>{this.updateSlider()}))}async updated(){__classPrivateFieldGet(this,_MarkdownEditor_editor,"f")||(__classPrivateFieldSet(this,_MarkdownEditor_editor,await createEditor({container:this.container,content:this.content,readOnly:this.readOnly,onUpload:this.onUpload,onChange:this._onChange,modifyImageUrl:this.modifyImageUrl}),"f"),this.slider.attachElement(this.milkdownElm))}updateSlider(){this.slider&&this.milkdownElm&&(this.milkdownElm.scrollHeight>this.milkdownElm.clientHeight&&(__classPrivateFieldGet(this,_MarkdownEditor_mouseIn,"f")||this.slider.sliding)?this.slider.show():this.slider.hide())}disconnectedCallback(){super.disconnectedCallback(),__classPrivateFieldGet(this,_MarkdownEditor_editor,"f")?.destroy(),__classPrivateFieldSet(this,_MarkdownEditor_editor,null,"f"),dom.empty(this.container)}layout(){}};_MarkdownEditor_content=new WeakMap,_MarkdownEditor_mouseIn=new WeakMap,_MarkdownEditor_editor=new WeakMap,MarkdownEditor.styles=[style,...styles],__decorate([property({type:String})],MarkdownEditor.prototype,"content",null),__decorate([property({type:Number})],MarkdownEditor.prototype,"maxContentWidth",void 0),__decorate([property({type:String,reflect:!0})],MarkdownEditor.prototype,"contentAlignment",void 0),__decorate([property({type:Boolean,reflect:!0})],MarkdownEditor.prototype,"readOnly",void 0),__decorate([query("#container")],MarkdownEditor.prototype,"container",void 0),__decorate([query("og-slider")],MarkdownEditor.prototype,"slider",void 0),__decorate([property({type:Object})],MarkdownEditor.prototype,"onUpload",void 0),__decorate([property({type:Object})],MarkdownEditor.prototype,"modifyImageUrl",void 0),MarkdownEditor=__decorate([customElement("og-markdown-editor")],MarkdownEditor);export{MarkdownEditor};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"markdownEditor.js","sourceRoot":"","sources":["../../src/components/markdownEditor.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAsC,MAAM,iBAAiB,CAAC;AAClF,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGxC,MAAM,OAAO,iBAAkB,SAAQ,KAAK;IAK3C,YAAY,IAAgC;QAC3C,KAAK,CAAC,eAAe,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC,CAAC;QAC1E,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAC3B,CAAC;CACD;AAGM,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAM7C,IAAI,OAAO,KAAK,OAAO,uBAAA,IAAI,+BAAS,CAAA,CAAC,CAAC;IACtC,IAAI,OAAO,CAAC,GAAW;QACtB,uBAAA,IAAI,2BAAY,GAAG,MAAA,CAAC;QACpB,uBAAA,IAAI,8BAAQ,EAAE,OAAO,EAAE,CAAC;QACxB,uBAAA,IAAI,0BAAW,IAAI,MAAA,CAAC;QACpB,IAAI,CAAC,aAAa,EAAE,CAAC;IACtB,CAAC;
|
|
1
|
+
{"version":3,"file":"markdownEditor.js","sourceRoot":"","sources":["../../src/components/markdownEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { dom, events, HorizontalPosition, Layout, Slider } from '@omegagrid/core';\nimport { LitElement, html } from 'lit';\nimport { customElement, query, property } from 'lit/decorators.js';\nimport { style } from './markdownEditor.style';\nimport styles from './styles';\nimport { createEditor } from '../utils';\nimport type * as milkdown from '@omegagrid/milkdown-kit';\n\nexport class MarkdownLinkEvent extends Event {\n\treadonly href: string;\n\treadonly a: HTMLAnchorElement;\n\treadonly origEvent: PointerEvent;\n\n\tconstructor(args: Partial<MarkdownLinkEvent>) {\n\t\tsuper(`markdown.link`, {bubbles: true, composed: true, cancelable: true});\n\t\tObject.assign(this, args);\n\t}\n}\n\n@customElement('og-markdown-editor')\nexport class MarkdownEditor extends LitElement implements Layout {\n\n\tstatic styles = [style, ...styles];\n\n\t#content: string\n\t@property({type: String})\n\tget content() { return this.#content }\n\tset content(val: string) {\n\t\tthis.#content = val;\n\t\tthis.#editor?.destroy();\n\t\tthis.#editor = null;\n\t\tthis.requestUpdate();\n\t}\n\n\t@property({type: Number})\n\tmaxContentWidth = 800;\n\n\t@property({type: String, reflect: true})\n\tcontentAlignment: HorizontalPosition = 'left';\n\n\t@property({type: Boolean, reflect: true})\n\treadOnly = false;\n\n\t@query('#container')\n\tcontainer: HTMLDivElement;\n\n\t@query('og-slider')\n\tslider: Slider;\n\n\t#mouseIn = false;\n\n\t@property({type: Object})\n\tonUpload: (file: File) => Promise<string>;\n\n\t@property({type: Object})\n\tmodifyImageUrl: (file: string) => Promise<string>|string;\n\n\t#editor: milkdown.core.Editor;\n\n\tget milkdownElm () { return this.container.firstElementChild as HTMLElement }\n\tget editor() { return this.#editor }\n\n\tconstructor() {\n\t\tsuper();\n\t\tdom.on(this, 'click', 'a', (e: PointerEvent, a) => {\n\t\t\tconst canceled = !this.dispatchEvent(new MarkdownLinkEvent({\n\t\t\t\thref: a.getAttribute('href'), \n\t\t\t\ta: a as HTMLAnchorElement,\n\t\t\t\torigEvent: e\n\t\t\t}));\n\n\t\t\tif (canceled) {\n\t\t\t\te.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst href = a.getAttribute('href');\n\t\t\tif (href && href.startsWith('#')) {\n\t\t\t\te.preventDefault();\n\t\t\t\tthis.scrollToSelector(href);\n\t\t\t}\n\t\t});\n\t}\n\n\tscrollToSelector(selector: string) {\n\t\tconst elm = this.milkdownElm.querySelector(selector) as HTMLElement;\n\t\tif (!elm) return;\n\t\tthis.milkdownElm.scrollTop = elm.offsetTop;\n\t\tthis.slider.updatePosition();\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.requestUpdate();\n\t}\n\n\tupdateWidth() {\n\t\tconst width = Math.min(this.maxContentWidth, this.clientWidth);\n\t\tthis.milkdownElm.style.width = `${width}px`;\n\t}\n\n\t_onChange = (markdown: string, prevMarkdown: string) => {\n\t\tthis.#content = markdown;\n\t\tthis.dispatchEvent(new events.ChangeEvent({value: markdown, oldValue: prevMarkdown}));\n\t}\n\n\tfirstUpdated() {\n\t\tthis.slider.hide();\n\n\t\tthis.addEventListener('mouseenter', () => {\n\t\t\tthis.#mouseIn = true;\n\t\t\tthis.updateSlider();\n\t\t});\n\n\t\tthis.addEventListener('mouseleave', () => {\n\t\t\tthis.#mouseIn = false;\n\t\t\tthis.updateSlider();\n\t\t});\n\n\t\tthis.slider.addEventListener('slideEnd', () => {\n\t\t\tthis.updateSlider();\n\t\t});\n\t}\n\n\tasync updated() {\n\t\tif (this.#editor) return;\n\t\tthis.#editor = await createEditor({\n\t\t\tcontainer: this.container,\n\t\t\tcontent: this.content,\n\t\t\treadOnly: this.readOnly,\n\t\t\tonUpload: this.onUpload,\n\t\t\tonChange: this._onChange,\n\t\t\tmodifyImageUrl: this.modifyImageUrl\n\t\t});\n\t\tthis.slider.attachElement(this.milkdownElm);\n\t}\n\n\tupdateSlider() {\n\t\tif (!this.slider || !this.milkdownElm) return;\n\t\tconst needsScroll = this.milkdownElm.scrollHeight > this.milkdownElm.clientHeight;\n\t\tif (needsScroll && (this.#mouseIn || this.slider.sliding)) {\n\t\t\tthis.slider.show();\n\t\t} else {\n\t\t\tthis.slider.hide();\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback();\n\t\tthis.#editor?.destroy();\n\t\tthis.#editor = null;\n\t\tdom.empty(this.container);\n\t}\n\n\trender = () => html`\n\t\t<style>\n\t\t\t.ProseMirror.editor { max-width: ${this.maxContentWidth}px; }\n\t\t</style>\n\t\t<div id=\"container\" spellcheck=\"false\"></div>\n\t\t<og-slider direction=\"vertical\" hidden></og-slider>\n\t`;\n\n\tlayout() { }\n\n}"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"markdownEditor.style.d.ts","sourceRoot":"","sources":["../../src/components/markdownEditor.style.ts"],"names":[],"mappings":"AAsBA,eAAO,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"markdownEditor.style.d.ts","sourceRoot":"","sources":["../../src/components/markdownEditor.style.ts"],"names":[],"mappings":"AAsBA,eAAO,MAAM,KAAK,yBAqOjB,CAAC"}
|
|
@@ -10,6 +10,7 @@ import{css}from"lit";export const style=css`
|
|
|
10
10
|
color: var(--og-text-color);
|
|
11
11
|
font-size: var(--og-font-size);
|
|
12
12
|
user-select: text;
|
|
13
|
+
background-color: var(--og-background-color);
|
|
13
14
|
|
|
14
15
|
--markdown-color-selected: var(--og-accent-color);
|
|
15
16
|
--markdown-color-outline: var(--og-accent-color);
|
|
@@ -44,6 +45,14 @@ import{css}from"lit";export const style=css`
|
|
|
44
45
|
flex-direction: row;
|
|
45
46
|
}
|
|
46
47
|
|
|
48
|
+
og-markdown-html-block {
|
|
49
|
+
border-width: 0;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
div[contenteditable="true"] og-markdown-html-block {
|
|
53
|
+
border-width: 1px;
|
|
54
|
+
}
|
|
55
|
+
|
|
47
56
|
:host([contentAlignment='center']) .ProseMirror {
|
|
48
57
|
margin: 0 auto;
|
|
49
58
|
}
|
|
@@ -158,7 +167,7 @@ import{css}from"lit";export const style=css`
|
|
|
158
167
|
padding: 2px 4px;
|
|
159
168
|
font-size: 90%;
|
|
160
169
|
color: #c7254e;
|
|
161
|
-
background-color:
|
|
170
|
+
background-color: var(--og-background-color-3);
|
|
162
171
|
border-radius: 0;
|
|
163
172
|
}
|
|
164
173
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"markdownEditor.style.js","sourceRoot":"","sources":["../../src/components/markdownEditor.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,0BAA0B;AAC1B,iCAAiC;AACjC,8BAA8B;AAC9B,4BAA4B;AAC5B,2BAA2B;AAC3B,wBAAwB;AACxB,+BAA+B;AAC/B,+BAA+B;AAC/B,uBAAuB;AACvB,yBAAyB;AACzB,sBAAsB;AACtB,8BAA8B;AAC9B,2BAA2B;AAC3B,2BAA2B;AAC3B,8BAA8B;AAC9B,2BAA2B;AAC3B,gCAAgC;AAChC,6BAA6B;AAG7B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"markdownEditor.style.js","sourceRoot":"","sources":["../../src/components/markdownEditor.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,0BAA0B;AAC1B,iCAAiC;AACjC,8BAA8B;AAC9B,4BAA4B;AAC5B,2BAA2B;AAC3B,wBAAwB;AACxB,+BAA+B;AAC/B,+BAA+B;AAC/B,uBAAuB;AACvB,yBAAyB;AACzB,sBAAsB;AACtB,8BAA8B;AAC9B,2BAA2B;AAC3B,2BAA2B;AAC3B,8BAA8B;AAC9B,2BAA2B;AAC3B,gCAAgC;AAChC,6BAA6B;AAG7B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqOvB,CAAC","sourcesContent":["import { css } from \"lit\";\n\n// --markdown-font-default\n// --markdown-color-on-background\n// --markdown-color-background\n// --markdown-color-selected\n// --markdown-color-primary\n// --markdown-font-title\n// --markdown-color-inline-code\n// --markdown-color-inline-area\n// --markdown-font-code\n// --markdown-color-hover\n// --markdown-shadow-1\n// --markdown-color-on-surface\n// --markdown-color-surface\n// --markdown-color-outline\n// --markdown-color-on-inverse\n// --markdown-color-inverse\n// --markdown-color-on-secondary\n// --markdown-color-secondary\n\n\nexport const style = css`\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\t\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t\tcolor: var(--og-text-color);\n\t\tfont-size: var(--og-font-size);\n\t\tuser-select: text;\n\t\tbackground-color: var(--og-background-color);\n\n\t\t--markdown-color-selected: var(--og-accent-color);\n\t\t--markdown-color-outline: var(--og-accent-color);\n\t\t--markdown-color-surface: var(--og-background-color);\n\t}\n\n\t:host([readonly]) og-markdown-block-edit, \n\t:host([readonly]) .operation-item \n\t:host([readonly]) .image-resize-handle {\n\t\tdisplay: none !important;\n\t}\n\n\tog-code-block, og-code-view {\n\t\tborder: 1px solid var(--og-accent-color);\n\t\twhite-space: normal;\n\t}\n\n\t.md-editor-drop-cursor {\n\t\tbackground-color: var(--og-accent-color) !important;\n\t}\n\n\t#container {\n\t\theight: 100%;\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t}\n\n\t.milkdown {\n\t\theight: 100%;\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t\tflex-direction: row;\n\t}\n\n\tog-markdown-html-block {\n\t\tborder-width: 0;\n\t}\n\n\tdiv[contenteditable=\"true\"] og-markdown-html-block {\n\t\tborder-width: 1px;\n\t}\n\n\t:host([contentAlignment='center']) .ProseMirror {\n\t\tmargin: 0 auto;\n\t}\n\n\t:host([contentAlignment='left']) .ProseMirror {\n\t\tmargin: 0 auto 0 0;\n\t}\n\n\t:host([contentAlignment='right']) .ProseMirror {\n\t\tmargin: 0 0 0 auto;\n\t}\n\n\tbutton, input {\n\t\tborder: none;\n\t\tbackground: none;\n\t\tbox-shadow: none;\n\t}\n\t\n\tbutton:focus, input:focus {\n\t\toutline: none;\n\t}\n\t\t\n\t:focus-visible {\n\t\toutline: none;\n\t}\n\t\t\t\n\t.ProseMirror-focused {\n\t\toutline: none;\n\t}\n\t\t\n\t.ProseMirror {\n\t\tpadding: 0px 60px 60px;\n\t}\n\t\t\n\t.ProseMirror *::selection {\n\t\tbackground: var(--markdown-color-selected);\n\t\tcolor: var(--og-text-color-2);\n\t}\n\t\t\n\tli.ProseMirror-selectednode {\n\t\tbackground: var(--markdown-color-selected);\n\t\toutline: none;\n\t}\n\t\n\tli.ProseMirror-selectednode::selection {\n\t\tbackground: transparent;\n\t}\n\t\n\tli.ProseMirror-selectednode:after {\n\t\tall: unset;\n\t}\n\t\t\n\t.ProseMirror-selectednode {\n\t\tbackground: var(--markdown-color-selected);\n\t\toutline: none;\n\t\tbackground: color-mix(in srgb, var(--markdown-color-selected), transparent 60%);\n\t}\n\t\n\t.ProseMirror-selectednode::selection {\n\t\tbackground: transparent;\n\t}\n\t\t\n\t.ProseMirror[data-dragging='true'] .ProseMirror-selectednode,\n\t.ProseMirror[data-dragging='true']::selection,\n\t.ProseMirror[data-dragging='true'] *::selection {\n\t\tbackground: transparent;\n\t}\n\t\t\n\t.ProseMirror[data-dragging='true'] input::selection {\n\t\tbackground: var(--markdown-color-selected);\n\t}\n\t\t\n\timg {\n\t\tvertical-align: bottom;\n\t\tmax-width: 100%;\n\t}\n\t\t\n\timg.ProseMirror-selectednode {\n\t\tbackground: none;\n\t\toutline: 2px solid var(--markdown-color-primary);\n\t}\n\t\t\n\th1 {\n\t\tfont-size: 1.5em;\n\t}\n\n\th2 {\n\t\tfont-size: 1.3em;\n\t}\n\n\th3 {\n\t\tfont-size: 1.1em;\n\t}\n\n\th4 {\n\t\tfont-size: 1em;\n\t}\n\n\ta {\n\t\tcolor: #688DC8;\n\t\ttext-decoration: underline;\n\t}\n\t\t\n\tp {\n\t\tfont-size: var(--og-font-size);\n\t\tmargin-block-start: 0.2em;\n\t\tmargin-block-end: 0.2em;\n\t\tpadding: 0px 0;\n\t}\n\n\tcode {\n\t\tpadding: 2px 4px;\n\t\tfont-size: 90%;\n\t\tcolor: #c7254e;\n\t\tbackground-color: var(--og-background-color-3);\n\t\tborder-radius: 0;\n\t}\n\t\t\n\tpre {\n\t\tbackground: color-mix(in srgb, var(--markdown-color-inline-area), transparent 40%);\n\t\tpadding: 10px;\n\t\tborder-radius: 4px;\n\t}\n\t\n\tpre code {\n\t\tpadding: 0;\n\t\tbackground: transparent;\n\t}\n\t\t\n\tblockquote {\n\t\tposition: relative;\n\t\tpadding-left: 40px;\n\t\tpadding-top: 0;\n\t\tpadding-bottom: 0;\n\t\tbox-sizing: content-box;\n\t\tmargin: 4px 0;\n\t}\n\t\n\tblockquote::before {\n\t\tcontent: '';\n\t\twidth: 4px;\n\t\tleft: 0;\n\t\ttop: 4px;\n\t\tbottom: 4px;\n\t\tposition: absolute;\n\t\tbackground: var(--markdown-color-selected);\n\t\tborder-radius: 100px;\n\t}\n\t\t\n\thr {\n\t\tborder: none;\n\t\tbackground-color: color-mix(in srgb, var(--markdown-color-outline), transparent 80%);\n\t\tbackground-clip: content-box;\n\t\tpadding: 6px 0;\n\t\theight: 13px;\n\t\tposition: relative;\n\t}\n\t\n\thr.ProseMirror-selectednode {\n\t\toutline: none;\n\t\tbackground-color: color-mix(in srgb, var(--markdown-color-outline), transparent 20%);\n\t\tbackground-clip: content-box;\n\t}\n\t\n\thr.ProseMirror-selectednode::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\tright: 0;\n\t\tbackground-color: color-mix(in srgb, var(--markdown-color-outline), transparent 80%);\n\t\tpointer-events: none;\n\t}\n`;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@omegagrid/markdown",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.50",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"description": "Markdown view webcomponent",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -28,11 +28,11 @@
|
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@fortawesome/fontawesome-svg-core": "^7.0.1",
|
|
31
|
-
"@omegagrid/code": "^0.9.
|
|
32
|
-
"@omegagrid/core": "^0.9.
|
|
33
|
-
"@omegagrid/localize": "^0.9.
|
|
34
|
-
"@omegagrid/milkdown-kit": "^0.9.
|
|
35
|
-
"@omegagrid/tabs": "^0.9.
|
|
31
|
+
"@omegagrid/code": "^0.9.50",
|
|
32
|
+
"@omegagrid/core": "^0.9.50",
|
|
33
|
+
"@omegagrid/localize": "^0.9.50",
|
|
34
|
+
"@omegagrid/milkdown-kit": "^0.9.50",
|
|
35
|
+
"@omegagrid/tabs": "^0.9.50",
|
|
36
36
|
"lit": "^3.1.1",
|
|
37
37
|
"markdown-it": "^14.1.0",
|
|
38
38
|
"ts-debounce": "^4.0.0"
|