@omegagrid/markdown 0.9.54 → 0.9.55

package/dist/components/features/index.js

@@ -1 +1 @@
-import{BlockHandleView}from"./blockEdit";import{ToolbarView}from"./toolbar";import{createPlaceHolder}from"./placeholder";import{createCodeBlockConfig,createCodeBlockView}from"./codeBlock";import{createHtmlBlockConfig,createHtmlBlockView}from"./htmlBlock";import{createTocBlock}from"./tocBlock";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-icon icon=${o}></og-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",e.Emoji="emoji",e.Toc="toc"}(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 i=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:i}))),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:i})))})).use(o.components.imageBlock.imageBlockComponent).use(o.components.imageInline.imageInlineComponent)}}],[EditorFeature.LinkTooltip,{default:!0,init:()=>{const o=linkEdit.getPlugin();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:i}=createPlaceHolder(o);e.config((e=>{e.update(t.key,(e=>({...e})))})).use(i).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),i=createCodeBlockView(o);e.config((e=>{e.update(t.key,(e=>({})))})).use([i,t])}}],[EditorFeature.Html,{default:!0,init:()=>{const t=createHtmlBlockConfig(o),i=createHtmlBlockView(o);e.config((e=>{e.update(t.key,(e=>({})))})).use([i,t])}}],[EditorFeature.Emoji,{default:!0,init:()=>{o.plugins.emoji&&e.use(o.plugins.emoji.emoji)}}],[EditorFeature.Toc,{default:!0,init:()=>{const t=createTocBlock(o);e.config((e=>{e.update(t.tocConfig.key,(e=>({})))})).use(t.plugins)}}]])}
+import{BlockHandleView}from"./blockEdit";import{ToolbarView}from"./toolbar";import{createPlaceHolder}from"./placeholder";import{createCodeBlockConfig,createCodeBlockView}from"./codeBlock";import{createHtmlBlockConfig,createHtmlBlockView}from"./htmlBlock";import{createTocBlock}from"./tocBlock";import linkEdit from"./linkEdit";export*from"./blockEditMenu";export*from"./htmlBlock";export*from"./linkEdit";export function configureFeatures(o,e){return t=>{t.inject(e.ctx.createSlice([],"FeaturesCtx"),o)}}const createIcon=(o,e)=>o.atomico.html`<og-icon icon=${e}></og-icon>`;export var EditorFeature;!function(o){o.BlockEdit="block-edit",o.Cursor="cursor",o.CodeEditor="code-editor",o.LinkTooltip="link-tooltip",o.ImageBlock="image-block",o.Toolbar="toolbar",o.Placeholder="placeholder",o.Table="table",o.Html="html",o.Emoji="emoji",o.Toc="toc"}(EditorFeature||(EditorFeature={}));const createModifyImageUrl=o=>async e=>{if(!e)return null;const t=o(e);return"string"==typeof e?t:await t};export function getFeatures(o,e,t){const i=t.modifyImageUrl?createModifyImageUrl(t.modifyImageUrl):null;return new Map([[EditorFeature.BlockEdit,{default:!0,init:()=>{o.config((o=>{o.set(e.plugins.block.blockConfig.key,{filterNodes:o=>!e.prose.findParent((o=>["table","blockquote"].includes(o.type.name)))(o)}),o.set(e.plugins.block.block.key,{view:()=>new BlockHandleView(o,e)})})).use(e.plugins.block.block)}}],[EditorFeature.Cursor,{default:!0,init:()=>{o.config((o=>{o.update(e.plugins.cursor.dropCursorConfig.key,(()=>({class:"md-editor-drop-cursor",width:4})))})).use(e.plugins.cursor.cursor)}}],[EditorFeature.ImageBlock,{default:!0,init:()=>{o.config((o=>{o.update(e.components.imageInline.inlineImageConfig.key,(o=>({uploadButton:'<og-icon icon="upload"></og-icon>',imageIcon:'<og-icon icon="image"></og-icon>',confirmButton:'<og-icon icon="check"></og-icon>',uploadPlaceholderText:"or paste link",onUpload:t.onUpload,proxyDomURL:i}))),o.update(e.components.imageBlock.imageBlockConfig.key,(o=>({uploadButton:"Upload file",imageIcon:'<og-icon icon="image"></og-icon>',captionIcon:'<og-icon icon="comment"></og-icon>',confirmButton:"Confirm",captionPlaceholderText:"Write Image Caption",uploadPlaceholderText:"or paste link",onUpload:t.onUpload,proxyDomURL:i})))})).use(e.components.imageBlock.imageBlockComponent).use(e.components.imageInline.imageInlineComponent)}}],[EditorFeature.LinkTooltip,{default:!0,init:()=>{const e=linkEdit.getPlugin();o.config(linkEdit.configure).use(e)}}],[EditorFeature.Toolbar,{default:!0,init:()=>{const t=e.plugins.tooltip.tooltipFactory("MARKDOWN_TOOLBAR");o.config((o=>{o.set(t.key,{view:t=>new ToolbarView(o,t,e)})})).use(t)}}],[EditorFeature.Placeholder,{default:!0,init:()=>{const{config:t,plugin:i}=createPlaceHolder(e);o.config((o=>{o.update(t.key,(o=>({...o})))})).use(i).use(t)}}],[EditorFeature.Table,{default:!0,init:()=>{o.config((o=>{o.update(e.components.tableBlock.tableBlockConfig.key,(o=>({renderButton:o=>{switch(o){case"add_row":case"add_col":return createIcon(e,"plus");case"delete_row":case"delete_col":return createIcon(e,"trash");case"align_col_left":return createIcon(e,"align-left");case"align_col_center":return createIcon(e,"align-center");case"align_col_right":return createIcon(e,"align-right");case"col_drag_handle":return createIcon(e,"grip-lines-vertical");case"row_drag_handle":return createIcon(e,"grip-lines")}}})))})).use(e.components.tableBlock.tableBlock)}}],[EditorFeature.CodeEditor,{default:!0,init:()=>{const t=createCodeBlockConfig(e),i=createCodeBlockView(e);o.config((o=>{o.update(t.key,(o=>({})))})).use([i,t])}}],[EditorFeature.Html,{default:!0,init:()=>{const t=createHtmlBlockConfig(e),i=createHtmlBlockView(e);o.config((o=>{o.update(t.key,(o=>({})))})).use([i,t])}}],[EditorFeature.Emoji,{default:!0,init:()=>{e.plugins.emoji&&o.use(e.plugins.emoji.emoji)}}],[EditorFeature.Toc,{default:!0,init:()=>{const t=createTocBlock(e);o.config((o=>{o.update(t.tocConfig.key,(o=>({})))})).use(t.plugins)}}]])}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/features/index.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\n// import { Editor } from '@milkdown/kit/core';\n// import { createSlice } from '@milkdown/kit/ctx';\n// import { BlockProvider, block, blockConfig } from '@milkdown/kit/plugin/block'\nimport { BlockHandleView } from './blockEdit';\nimport type * as milkdown from '@omegagrid/milkdown-kit';\nimport { ToolbarView } from './toolbar';\nimport { createPlaceHolder } from './placeholder';\nimport { createCodeBlockConfig, createCodeBlockView } from './codeBlock';\nimport { createHtmlBlockConfig, createHtmlBlockView } from './htmlBlock';\nimport { createTocBlock } from './tocBlock';\nimport linkEdit from './linkEdit';\n\nexport * from './blockEditMenu';\nexport * from './htmlBlock';\nexport * from './linkEdit';\n\nexport type DefineFeature<TConfig = unknown> = (\n\teditor: milkdown.core.Editor,\n\tconfig?: TConfig\n) => void | Promise<void>\n\nexport function configureFeatures(features: EditorFeature[], md: typeof milkdown) {\n\treturn (ctx: milkdown.ctx.Ctx) => {\n\t\tctx.inject(md.ctx.createSlice([] as EditorFeature[], 'FeaturesCtx'), features)\n\t}\n}\n\nconst createIcon = (md: typeof milkdown, icon: string) => \n\tmd.atomico.html`<og-icon icon=${icon}></og-icon>`;\n\nexport enum EditorFeature {\n\tBlockEdit = 'block-edit',\n\tCursor = 'cursor',\n\tCodeEditor = 'code-editor',\n\t// ListItem = 'list-item',\n\tLinkTooltip = 'link-tooltip',\n\tImageBlock = 'image-block',\n\tToolbar = 'toolbar',\n\tPlaceholder = 'placeholder',\n\tTable = 'table',\n\tHtml = 'html',\n\tEmoji = 'emoji',\n\tToc = 'toc'\n}\n\nexport type FeatureDefinition = {\n\tdefault: boolean,\n\tinit: () => void\n};\n\nconst createModifyImageUrl = (fn: (url: string) => Promise<string>|string) => {\n\treturn async (url: string) => {\n\t\tif (!url) return null;\n\t\tconst modUrl = fn(url);\n\t\treturn typeof url === 'string' ? modUrl : await modUrl;\n\t}\n};\n\nexport function getFeatures(\n\teditor: milkdown.core.Editor,\n\tmd: typeof milkdown,\n\toptions: {\n\t\tonUpload?: (file: File) => Promise<string>,\n\t\tmodifyImageUrl?: (file: string) => Promise<string>|string,\n\t}\n) {\n\tconst modifyImageUrl = options.modifyImageUrl ? createModifyImageUrl(options.modifyImageUrl) : null;\n\treturn new Map<EditorFeature, FeatureDefinition>([\n\t\t[EditorFeature.BlockEdit, {\n\t\t\tdefault: true,\n\t\t\tinit: () => {\n\t\t\t\teditor.config((ctx) => {\n\t\t\t\t\tctx.set(md.plugins.block.blockConfig.key, {\n\t\t\t\t\t\tfilterNodes: (pos) => {\n\t\t\t\t\t\tconst filter = md.prose.findParent((node) =>\n\t\t\t\t\t\t\t['table', 'blockquote'].includes(node.type.name)\n\t\t\t\t\t\t)(pos)\n\t\t\t\t\t\tif (filter) return false\n\t\t\t\t\t\n\t\t\t\t\t\treturn true\n\t\t\t\t\t\t},\n\t\t\t\t\t});\n\t\t\t\t\tctx.set(md.plugins.block.block.key, {\n\t\t\t\t\t\tview: () => new BlockHandleView(ctx, md),\n\t\t\t\t\t})\n\t\t\t\t}).use(md.plugins.block.block);\n\t\t\t\t// .config((ctx) => configureMenu(ctx, config))\n\t\t\t\t// .use(menuAPI)\n\t\t\t\t// .use(menu)\n\t\t\t}\n\t\t}], [EditorFeature.Cursor, {\n\t\t\tdefault: true,\n\t\t\tinit: () => {\n\t\t\t\teditor.config((ctx) => {\n\t\t\t\t\tctx.update(md.plugins.cursor.dropCursorConfig.key, () => ({\n\t\t\t\t\t\tclass: 'md-editor-drop-cursor',\n\t\t\t\t\t\twidth: 4,\n\t\t\t\t\t\t// color: '#ff0000',\n\t\t\t\t\t}))\n\t\t\t\t}).use(md.plugins.cursor.cursor)\n\t\t\t}\n\t\t}], [EditorFeature.ImageBlock, {\n\t\t\tdefault: true,\n\t\t\tinit: () => {\n\t\t\t\teditor.config((ctx) => {\n\t\t\t\t\tctx.update(md.components.imageInline.inlineImageConfig.key, (_value) => ({\n\t\t\t\t\t\tuploadButton: () => createIcon(md, 'upload'),\n\t\t\t\t\t\timageIcon: () => createIcon(md, 'image'),\n\t\t\t\t\t\tconfirmButton: () => createIcon(md, 'check'),\n\t\t\t\t\t\tuploadPlaceholderText: 'or paste link',\n\t\t\t\t\t\tonUpload: options.onUpload,\n\t\t\t\t\t\tproxyDomURL: modifyImageUrl,\n\t\t\t\t\t} as any))\n\t\t\t\t\tctx.update(md.components.imageBlock.imageBlockConfig.key, (_value) => ({\n\t\t\t\t\t\tuploadButton: () => 'Upload file',\n\t\t\t\t\t\timageIcon: () => createIcon(md, 'image'),\n\t\t\t\t\t\tcaptionIcon: () => createIcon(md, 'comment'),\n\t\t\t\t\t\tconfirmButton: () => 'Confirm',\n\t\t\t\t\t\tcaptionPlaceholderText: 'Write Image Caption',\n\t\t\t\t\t\tuploadPlaceholderText: 'or paste link',\n\t\t\t\t\t\tonUpload: options.onUpload,\n\t\t\t\t\t\tproxyDomURL: modifyImageUrl,\n\t\t\t\t\t} as any))\n\t\t\t\t})\n\t\t\t\t.use(md.components.imageBlock.imageBlockComponent)\n\t\t\t\t.use(md.components.imageInline.imageInlineComponent)\n\t\t\t}\n\t\t}], [EditorFeature.LinkTooltip, {\n\t\t\tdefault: true,\n\t\t\tinit: () => {\n\t\t\t\t// const toolbar = md.plugins.tooltip.tooltipFactory('MARKDOWN_LINK_EDIT_TOOLBAR');\n\t\t\t\tconst plugin = linkEdit.getPlugin();\n\t\t\t\teditor.config(linkEdit.configure)\n\t\t\t\t/*.config((ctx) => {\n\t\t\t\t\tctx.update(linkEdit.getState().key, (prev) => ({...prev}));\n\t\t\t\t})*/\n\t\t\t\t.use(plugin);\n\t\t\t}\n\t\t}], [EditorFeature.Toolbar, {\n\t\t\tdefault: true,\n\t\t\tinit: () => {\n\t\t\t\tconst toolbar = md.plugins.tooltip.tooltipFactory('MARKDOWN_TOOLBAR');\n\t\t\t\teditor.config((ctx) => {\n\t\t\t\t\tctx.set(toolbar.key, {\n\t\t\t\t\t\tview: (view) => new ToolbarView(ctx, view, md),\n\t\t\t\t\t})\n\t\t\t\t})\n\t\t\t\t.use(toolbar)\n\t\t\t}\n\t\t}], [EditorFeature.Placeholder, {\n\t\t\tdefault: true,\n\t\t\tinit: () => {\n\t\t\t\tconst { config, plugin } = createPlaceHolder(md);\n\t\t\t\t\n\t\t\t\teditor.config((ctx) => {\n\t\t\t\t\tctx.update(config.key, (prev) => {\n\t\t\t\t\t\treturn {...prev};\n\t\t\t\t\t});\n\t\t\t\t})\n\t\t\t\t.use(plugin)\n\t\t\t\t.use(config)\n\t\t\t}\n\t\t}], [EditorFeature.Table, {\n\t\t\tdefault: true,\n\t\t\tinit: () => {\n\t\t\t\teditor.config((ctx) => {\n\t\t\t\t\tctx.update(md.components.tableBlock.tableBlockConfig.key, (_prev) => ({\n\t\t\t\t\t\trenderButton: (renderType) => {\n\t\t\t\t\t\t\tswitch (renderType) {\n\t\t\t\t\t\t\t\tcase 'add_row': return createIcon(md, 'plus');\n\t\t\t\t\t\t\t\tcase 'add_col': return createIcon(md, 'plus');\n\t\t\t\t\t\t\t\tcase 'delete_row': return createIcon(md, 'trash');\n\t\t\t\t\t\t\t\tcase 'delete_col': return createIcon(md, 'trash');\n\t\t\t\t\t\t\t\tcase 'align_col_left': return createIcon(md, 'align-left');\n\t\t\t\t\t\t\t\tcase 'align_col_center': return createIcon(md, 'align-center');\n\t\t\t\t\t\t\t\tcase 'align_col_right': return createIcon(md, 'align-right');\n\t\t\t\t\t\t\t\tcase 'col_drag_handle': return createIcon(md, 'grip-lines-vertical');\n\t\t\t\t\t\t\t\tcase 'row_drag_handle': return createIcon(md, 'grip-lines');\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}));\n\t\t\t\t})\n\t\t\t\t.use(md.components.tableBlock.tableBlock)\n\t\t\t}\n\t\t}], [EditorFeature.CodeEditor, {\n\t\t\tdefault: true,\n\t\t\tinit: () => {\n\t\t\t\tconst codeBlockConfig = createCodeBlockConfig(md);\n\t\t\t\tconst codeBlockView = createCodeBlockView(md);\n\t\t\t\teditor.config((ctx) => {\n\t\t\t\t\tctx.update(codeBlockConfig.key, (_defaultConfig) => ({}));\n\t\t\t\t}).use([codeBlockView, codeBlockConfig]);\n\t\t\t}\n\t\t}], [EditorFeature.Html, {\n\t\t\tdefault: true,\n\t\t\tinit: () => {\n\t\t\t\tconst htmlBlockConfig = createHtmlBlockConfig(md);\n\t\t\t\tconst htmlBlockView = createHtmlBlockView(md);\n\t\t\t\teditor.config((ctx) => {\n\t\t\t\t\tctx.update(htmlBlockConfig.key, (_defaultConfig) => ({}));\n\t\t\t\t}).use([htmlBlockView, htmlBlockConfig]);\n\t\t\t}\n\t\t}], [EditorFeature.Emoji, {\n\t\t\tdefault: true,\n\t\t\tinit: () => {\n\t\t\t\tif (md.plugins.emoji) editor.use(md.plugins.emoji.emoji);\n\t\t\t}\n\t\t}], [EditorFeature.Toc, {\n\t\t\tdefault: true,\n\t\t\tinit: () => {\n\t\t\t\tconst toc = createTocBlock(md);\n\t\t\t\teditor.config((ctx) => {\n\t\t\t\t\tctx.update(toc.tocConfig.key, (_d) => ({}));\n\t\t\t\t}).use(toc.plugins);\n\t\t\t}\n\t\t}]\n\t]);\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/features/index.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\n// import { Editor } from '@milkdown/kit/core';\n// import { createSlice } from '@milkdown/kit/ctx';\n// import { BlockProvider, block, blockConfig } from '@milkdown/kit/plugin/block'\nimport { BlockHandleView } from './blockEdit';\nimport type * as milkdown from '@omegagrid/milkdown-kit';\nimport { ToolbarView } from './toolbar';\nimport { createPlaceHolder } from './placeholder';\nimport { createCodeBlockConfig, createCodeBlockView } from './codeBlock';\nimport { createHtmlBlockConfig, createHtmlBlockView } from './htmlBlock';\nimport { createTocBlock } from './tocBlock';\nimport linkEdit from './linkEdit';\n\nexport * from './blockEditMenu';\nexport * from './htmlBlock';\nexport * from './linkEdit';\n\nexport type DefineFeature<TConfig = unknown> = (\n\teditor: milkdown.core.Editor,\n\tconfig?: TConfig\n) => void | Promise<void>\n\nexport function configureFeatures(features: EditorFeature[], md: typeof milkdown) {\n\treturn (ctx: milkdown.ctx.Ctx) => {\n\t\tctx.inject(md.ctx.createSlice([] as EditorFeature[], 'FeaturesCtx'), features)\n\t}\n}\n\nconst createIcon = (md: typeof milkdown, icon: string) => \n\tmd.atomico.html`<og-icon icon=${icon}></og-icon>`;\n\nexport enum EditorFeature {\n\tBlockEdit = 'block-edit',\n\tCursor = 'cursor',\n\tCodeEditor = 'code-editor',\n\t// ListItem = 'list-item',\n\tLinkTooltip = 'link-tooltip',\n\tImageBlock = 'image-block',\n\tToolbar = 'toolbar',\n\tPlaceholder = 'placeholder',\n\tTable = 'table',\n\tHtml = 'html',\n\tEmoji = 'emoji',\n\tToc = 'toc'\n}\n\nexport type FeatureDefinition = {\n\tdefault: boolean,\n\tinit: () => void\n};\n\nconst createModifyImageUrl = (fn: (url: string) => Promise<string>|string) => {\n\treturn async (url: string) => {\n\t\tif (!url) return null;\n\t\tconst modUrl = fn(url);\n\t\treturn typeof url === 'string' ? modUrl : await modUrl;\n\t}\n};\n\nexport function getFeatures(\n\teditor: milkdown.core.Editor,\n\tmd: typeof milkdown,\n\toptions: {\n\t\tonUpload?: (file: File) => Promise<string>,\n\t\tmodifyImageUrl?: (file: string) => Promise<string>|string,\n\t}\n) {\n\tconst modifyImageUrl = options.modifyImageUrl ? createModifyImageUrl(options.modifyImageUrl) : null;\n\treturn new Map<EditorFeature, FeatureDefinition>([\n\t\t[EditorFeature.BlockEdit, {\n\t\t\tdefault: true,\n\t\t\tinit: () => {\n\t\t\t\teditor.config((ctx) => {\n\t\t\t\t\tctx.set(md.plugins.block.blockConfig.key, {\n\t\t\t\t\t\tfilterNodes: (pos) => {\n\t\t\t\t\t\tconst filter = md.prose.findParent((node) =>\n\t\t\t\t\t\t\t['table', 'blockquote'].includes(node.type.name)\n\t\t\t\t\t\t)(pos)\n\t\t\t\t\t\tif (filter) return false\n\t\t\t\t\t\n\t\t\t\t\t\treturn true\n\t\t\t\t\t\t},\n\t\t\t\t\t});\n\t\t\t\t\tctx.set(md.plugins.block.block.key, {\n\t\t\t\t\t\tview: () => new BlockHandleView(ctx, md),\n\t\t\t\t\t})\n\t\t\t\t}).use(md.plugins.block.block);\n\t\t\t\t// .config((ctx) => configureMenu(ctx, config))\n\t\t\t\t// .use(menuAPI)\n\t\t\t\t// .use(menu)\n\t\t\t}\n\t\t}], [EditorFeature.Cursor, {\n\t\t\tdefault: true,\n\t\t\tinit: () => {\n\t\t\t\teditor.config((ctx) => {\n\t\t\t\t\tctx.update(md.plugins.cursor.dropCursorConfig.key, () => ({\n\t\t\t\t\t\tclass: 'md-editor-drop-cursor',\n\t\t\t\t\t\twidth: 4,\n\t\t\t\t\t\t// color: '#ff0000',\n\t\t\t\t\t}))\n\t\t\t\t}).use(md.plugins.cursor.cursor)\n\t\t\t}\n\t\t}], [EditorFeature.ImageBlock, {\n\t\t\tdefault: true,\n\t\t\tinit: () => {\n\t\t\t\teditor.config((ctx) => {\n\t\t\t\t\tctx.update(md.components.imageInline.inlineImageConfig.key, (_value) => ({\n\t\t\t\t\t\tuploadButton: '<og-icon icon=\"upload\"></og-icon>',\n\t\t\t\t\t\timageIcon: '<og-icon icon=\"image\"></og-icon>',\n\t\t\t\t\t\tconfirmButton: '<og-icon icon=\"check\"></og-icon>',\n\t\t\t\t\t\tuploadPlaceholderText: 'or paste link',\n\t\t\t\t\t\tonUpload: options.onUpload,\n\t\t\t\t\t\tproxyDomURL: modifyImageUrl,\n\t\t\t\t\t} as any))\n\t\t\t\t\tctx.update(md.components.imageBlock.imageBlockConfig.key, (_value) => ({\n\t\t\t\t\t\tuploadButton: 'Upload file',\n\t\t\t\t\t\timageIcon: '<og-icon icon=\"image\"></og-icon>',\n\t\t\t\t\t\tcaptionIcon: '<og-icon icon=\"comment\"></og-icon>',\n\t\t\t\t\t\tconfirmButton: 'Confirm',\n\t\t\t\t\t\tcaptionPlaceholderText: 'Write Image Caption',\n\t\t\t\t\t\tuploadPlaceholderText: 'or paste link',\n\t\t\t\t\t\tonUpload: options.onUpload,\n\t\t\t\t\t\tproxyDomURL: modifyImageUrl,\n\t\t\t\t\t} as any))\n\t\t\t\t})\n\t\t\t\t.use(md.components.imageBlock.imageBlockComponent)\n\t\t\t\t.use(md.components.imageInline.imageInlineComponent)\n\t\t\t}\n\t\t}], [EditorFeature.LinkTooltip, {\n\t\t\tdefault: true,\n\t\t\tinit: () => {\n\t\t\t\t// const toolbar = md.plugins.tooltip.tooltipFactory('MARKDOWN_LINK_EDIT_TOOLBAR');\n\t\t\t\tconst plugin = linkEdit.getPlugin();\n\t\t\t\teditor.config(linkEdit.configure)\n\t\t\t\t/*.config((ctx) => {\n\t\t\t\t\tctx.update(linkEdit.getState().key, (prev) => ({...prev}));\n\t\t\t\t})*/\n\t\t\t\t.use(plugin);\n\t\t\t}\n\t\t}], [EditorFeature.Toolbar, {\n\t\t\tdefault: true,\n\t\t\tinit: () => {\n\t\t\t\tconst toolbar = md.plugins.tooltip.tooltipFactory('MARKDOWN_TOOLBAR');\n\t\t\t\teditor.config((ctx) => {\n\t\t\t\t\tctx.set(toolbar.key, {\n\t\t\t\t\t\tview: (view) => new ToolbarView(ctx, view, md),\n\t\t\t\t\t})\n\t\t\t\t})\n\t\t\t\t.use(toolbar)\n\t\t\t}\n\t\t}], [EditorFeature.Placeholder, {\n\t\t\tdefault: true,\n\t\t\tinit: () => {\n\t\t\t\tconst { config, plugin } = createPlaceHolder(md);\n\t\t\t\t\n\t\t\t\teditor.config((ctx) => {\n\t\t\t\t\tctx.update(config.key, (prev) => {\n\t\t\t\t\t\treturn {...prev};\n\t\t\t\t\t});\n\t\t\t\t})\n\t\t\t\t.use(plugin)\n\t\t\t\t.use(config)\n\t\t\t}\n\t\t}], [EditorFeature.Table, {\n\t\t\tdefault: true,\n\t\t\tinit: () => {\n\t\t\t\teditor.config((ctx) => {\n\t\t\t\t\tctx.update(md.components.tableBlock.tableBlockConfig.key, (_prev) => ({\n\t\t\t\t\t\trenderButton: (renderType) => {\n\t\t\t\t\t\t\tswitch (renderType) {\n\t\t\t\t\t\t\t\tcase 'add_row': return createIcon(md, 'plus');\n\t\t\t\t\t\t\t\tcase 'add_col': return createIcon(md, 'plus');\n\t\t\t\t\t\t\t\tcase 'delete_row': return createIcon(md, 'trash');\n\t\t\t\t\t\t\t\tcase 'delete_col': return createIcon(md, 'trash');\n\t\t\t\t\t\t\t\tcase 'align_col_left': return createIcon(md, 'align-left');\n\t\t\t\t\t\t\t\tcase 'align_col_center': return createIcon(md, 'align-center');\n\t\t\t\t\t\t\t\tcase 'align_col_right': return createIcon(md, 'align-right');\n\t\t\t\t\t\t\t\tcase 'col_drag_handle': return createIcon(md, 'grip-lines-vertical');\n\t\t\t\t\t\t\t\tcase 'row_drag_handle': return createIcon(md, 'grip-lines');\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}));\n\t\t\t\t})\n\t\t\t\t.use(md.components.tableBlock.tableBlock)\n\t\t\t}\n\t\t}], [EditorFeature.CodeEditor, {\n\t\t\tdefault: true,\n\t\t\tinit: () => {\n\t\t\t\tconst codeBlockConfig = createCodeBlockConfig(md);\n\t\t\t\tconst codeBlockView = createCodeBlockView(md);\n\t\t\t\teditor.config((ctx) => {\n\t\t\t\t\tctx.update(codeBlockConfig.key, (_defaultConfig) => ({}));\n\t\t\t\t}).use([codeBlockView, codeBlockConfig]);\n\t\t\t}\n\t\t}], [EditorFeature.Html, {\n\t\t\tdefault: true,\n\t\t\tinit: () => {\n\t\t\t\tconst htmlBlockConfig = createHtmlBlockConfig(md);\n\t\t\t\tconst htmlBlockView = createHtmlBlockView(md);\n\t\t\t\teditor.config((ctx) => {\n\t\t\t\t\tctx.update(htmlBlockConfig.key, (_defaultConfig) => ({}));\n\t\t\t\t}).use([htmlBlockView, htmlBlockConfig]);\n\t\t\t}\n\t\t}], [EditorFeature.Emoji, {\n\t\t\tdefault: true,\n\t\t\tinit: () => {\n\t\t\t\tif (md.plugins.emoji) editor.use(md.plugins.emoji.emoji);\n\t\t\t}\n\t\t}], [EditorFeature.Toc, {\n\t\t\tdefault: true,\n\t\t\tinit: () => {\n\t\t\t\tconst toc = createTocBlock(md);\n\t\t\t\teditor.config((ctx) => {\n\t\t\t\t\tctx.update(toc.tocConfig.key, (_d) => ({}));\n\t\t\t\t}).use(toc.plugins);\n\t\t\t}\n\t\t}]\n\t]);\n}\n"]}

package/dist/components/styles/emoji.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"emoji.d.ts","sourceRoot":"","sources":["../../../src/components/styles/emoji.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,yBASjB,CAAC"}
+{"version":3,"file":"emoji.d.ts","sourceRoot":"","sources":["../../../src/components/styles/emoji.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,yBAajB,CAAC"}

package/dist/components/styles/emoji.js

@@ -4,7 +4,11 @@ import{css}from"lit";export const style=css`
 	}
 
 	span[data-type='emoji'] .emoji {
-		width: 1rem;
-		height: 1rem;
+		width: 0.6rem;
+		height: 0.6rem;
+	}
+
+	img.emoji {
+		vertical-align: middle;
 	}
 `;

package/dist/components/styles/emoji.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji.js","sourceRoot":"","sources":["../../../src/components/styles/emoji.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;CASvB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nexport const style = css`\n\tspan[data-type='emoji'] {\n\t\tdisplay: inline-block;\n\t}\n\n\tspan[data-type='emoji'] .emoji {\n\t\twidth: 1rem;\n\t\theight: 1rem;\n\t}\n`;\n"]}
+{"version":3,"file":"emoji.js","sourceRoot":"","sources":["../../../src/components/styles/emoji.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;CAavB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nexport const style = css`\n\tspan[data-type='emoji'] {\n\t\tdisplay: inline-block;\n\t}\n\n\tspan[data-type='emoji'] .emoji {\n\t\twidth: 0.6rem;\n\t\theight: 0.6rem;\n\t}\n\n\timg.emoji {\n\t\tvertical-align: middle;\n\t}\n`;\n"]}

package/dist/components/styles/image-block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image-block.d.ts","sourceRoot":"","sources":["../../../src/components/styles/image-block.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,yBA2UjB,CAAC"}
+{"version":3,"file":"image-block.d.ts","sourceRoot":"","sources":["../../../src/components/styles/image-block.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,yBA0YjB,CAAC"}

package/dist/components/styles/image-block.js

@@ -1,31 +1,39 @@
 import{css}from"lit";export const style=css`
-	milkdown-image-inline {
+	/* inline image */
+
+	.milkdown .milkdown-image-inline {
 		outline: none;
-		display: inline;
+		display: inline-flex;
+		vertical-align: text-bottom;
 	}
-	milkdown-image-inline input {
+
+	.milkdown .milkdown-image-inline input {
 		background: transparent;
 		outline: none;
 		border: 0;
+		caret-color: var(--markdown-color-outline);
 	}
-	milkdown-image-inline.empty {
-		vertical-align: bottom;
-	}
-	milkdown-image-inline > .empty-image-inline {
+
+	.milkdown .milkdown-image-inline > .empty-image-inline {
 		display: inline-flex;
 	}
-	milkdown-image-inline > .empty-image-inline .confirm {
+
+	.milkdown .milkdown-image-inline > .empty-image-inline .confirm {
 		cursor: pointer;
 	}
-	milkdown-image-inline > .empty-image-inline .link-importer {
+
+	.milkdown .milkdown-image-inline > .empty-image-inline .link-importer {
 		position: relative;
 		flex: 1;
 	}
-	milkdown-image-inline > .empty-image-inline .link-importer > .link-input-area {
+
+	.milkdown .milkdown-image-inline > .empty-image-inline .link-importer > .link-input-area {
 		width: 208px;
 		color: var(--markdown-color-on-background);
+		display: flex;
 	}
-	milkdown-image-inline > .empty-image-inline .link-importer .placeholder {
+
+	.milkdown .milkdown-image-inline > .empty-image-inline .link-importer .placeholder {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -34,149 +42,183 @@ import{css}from"lit";export const style=css`
 		align-items: center;
 		cursor: text;
 	}
-	milkdown-image-inline > .empty-image-inline .link-importer .placeholder .uploader {
+
+	.milkdown .milkdown-image-inline > .empty-image-inline .link-importer .placeholder .uploader {
 		cursor: pointer;
 		display: flex;
 	}
-	milkdown-image-inline .hidden {
+
+	.milkdown .milkdown-image-inline .hidden {
 		display: none !important;
 	}
-	milkdown-image-inline.empty.selected {
+
+	.milkdown .milkdown-image-inline.empty.selected {
 		background: none;
 		outline: none;
 	}
-	milkdown-image-inline.empty.selected .empty-image-inline {
+
+	.milkdown .milkdown-image-inline.empty.selected .empty-image-inline {
 		box-shadow: var(--markdown-shadow-1);
 	}
-	milkdown-image-inline.selected {
+
+	.milkdown .milkdown-image-inline.selected {
 		background: none;
-		outline: 1px solid var(--og-accent-color);
+		outline: 1px solid var(--markdown-color-primary);
 	}
-	milkdown-image-inline.selected :not(input)::selection {
+
+	.milkdown .milkdown-image-inline.selected :not(input)::selection {
 		background: transparent;
 	}
-	milkdown-image-inline img.image-inline {
-		vertical-align: text-bottom;
-	}
-	milkdown-image-inline .empty-image-inline {
+
+	.milkdown .milkdown-image-inline .empty-image-inline {
 		align-items: center;
 		padding: 4px 10px;
 		gap: 10px;
 		background: var(--markdown-color-surface);
 		font-family: var(--markdown-font-default);
 		border-radius: 8px;
+		font-size: 16px;
 	}
-	milkdown-image-inline .empty-image-inline .image-icon {
+
+	.milkdown .milkdown-image-inline .empty-image-inline .image-icon {
 		padding: 3px;
 		width: 24px;
 		height: 24px;
 	}
-	milkdown-image-inline .empty-image-inline .image-icon svg {
+
+	.milkdown .milkdown-image-inline .empty-image-inline .image-icon svg {
 		width: 18px;
 		height: 18px;
 		fill: var(--markdown-color-outline);
 	}
-	milkdown-image-inline .empty-image-inline .link-importer {
+
+	.milkdown .milkdown-image-inline .empty-image-inline .link-importer {
 		height: 24px;
 	}
-	milkdown-image-inline .empty-image-inline .link-importer .placeholder {
+
+	.milkdown .milkdown-image-inline .empty-image-inline .link-importer .placeholder {
 		color: color-mix(in srgb, var(--markdown-color-on-background), transparent 60%);
 	}
-	milkdown-image-inline .empty-image-inline .link-importer .placeholder :not(input)::selection {
+
+	.milkdown .milkdown-image-inline .empty-image-inline .link-importer .placeholder :not(input)::selection {
 		background: transparent;
 	}
-	milkdown-image-inline .empty-image-inline .link-importer .link-input-area {
+
+	.milkdown .milkdown-image-inline .empty-image-inline .link-importer .link-input-area {
 		line-height: 24px;
 	}
-	milkdown-image-inline .empty-image-inline .link-importer .placeholder .uploader {
+
+	.milkdown .milkdown-image-inline .empty-image-inline .link-importer .placeholder .uploader {
 		gap: 8px;
 		color: var(--og-accent-color);
 		justify-content: center;
 		transition: color 0.2s;
 		font-family: var(--markdown-font-default);
 	}
-	milkdown-image-inline .empty-image-inline .link-importer.focus .placeholder .uploader {
+
+	.milkdown .milkdown-image-inline .empty-image-inline .link-importer.focus .placeholder .uploader {
 		color: unset;
 	}
-	milkdown-image-inline .empty-image-inline .link-importer .placeholder .uploader:hover {
+
+	.milkdown .milkdown-image-inline .empty-image-inline .link-importer .placeholder .uploader:hover {
 		color: var(--og-accent-color);
 	}
-	milkdown-image-inline .empty-image-inline .link-importer .placeholder .text {
+
+	.milkdown .milkdown-image-inline .empty-image-inline .link-importer .placeholder .text {
 		margin-left: 8px;
 	}
-	milkdown-image-inline .empty-image-inline .confirm {
+
+	.milkdown .milkdown-image-inline .empty-image-inline .confirm {
+		display: flex;
 		width: 24px;
 		height: 24px;
 		padding: 3px;
 		border-radius: 8px;
 		color: var(--og-accent-color);
 	}
-	milkdown-image-inline .empty-image-inline .confirm svg {
+
+	.milkdown .milkdown-image-inline .empty-image-inline .confirm svg {
 		width: 18px;
 		height: 18px;
 	}
-	milkdown-image-inline .empty-image-inline .confirm:hover {
+
+	.milkdown .milkdown-image-inline .empty-image-inline .confirm:hover {
 		background: var(--markdown-color-hover);
 	}
 
-	milkdown-image-block {
+	/* image block */
+
+	.milkdown .milkdown-image-block {
 		outline: none;
 		margin: 4px 0;
 		display: block;
 	}
-	milkdown-image-block > .image-wrapper {
+
+	.milkdown .milkdown-image-block > .image-wrapper {
 		position: relative;
 		width: fit-content;
 		margin: 0 auto;
 		min-width: 100px;
 	}
 
-	milkdown-image-block > .image-wrapper .operation {
+	.milkdown .milkdown-image-block > .image-wrapper .operation {
 		position: absolute;
 		display: flex;
 	}
-	milkdown-image-block > .image-wrapper .operation > .operation-item {
+
+	.milkdown .milkdown-image-block > .image-wrapper .operation > .operation-item {
 		cursor: pointer;
 	}
-	milkdown-image-block > .image-wrapper img {
+
+	.milkdown .milkdown-image-block > .image-wrapper img {
 		max-width: 100%;
 		min-height: 100px;
 		display: block;
 		object-fit: cover;
 	}
-	milkdown-image-block > .image-wrapper > .image-resize-handle {
+
+	.milkdown .milkdown-image-block > .image-wrapper > .image-resize-handle {
 		position: absolute;
 		left: 50%;
 		transform: translateX(-50%);
 	}
-	milkdown-image-block > .image-wrapper > .image-resize-handle:hover {
+
+	.milkdown .milkdown-image-block > .image-wrapper > .image-resize-handle:hover {
 		cursor: row-resize;
 	}
-	milkdown-image-block input {
+
+	.milkdown .milkdown-image-block input {
 		background: transparent;
 		outline: none;
 		border: 0;
+		caret-color: var(--markdown-color-outline);
 	}
-	milkdown-image-block > .caption-input {
+
+	.milkdown .milkdown-image-block > .caption-input {
 		display: block;
 		width: 100%;
 		text-align: center;
 		color: var(--markdown-color-on-background);
 	}
-	milkdown-image-block > .image-edit {
+
+	.milkdown .milkdown-image-block > .image-edit {
 		display: flex;
 	}
-	milkdown-image-block > .image-edit .confirm {
+
+	.milkdown .milkdown-image-block > .image-edit .confirm {
 		cursor: pointer;
 	}
-	milkdown-image-block > .image-edit .link-importer {
+
+	.milkdown .milkdown-image-block > .image-edit .link-importer {
 		position: relative;
 		flex: 1;
 	}
-	milkdown-image-block > .image-edit .link-importer > .link-input-area {
+
+	.milkdown .milkdown-image-block > .image-edit .link-importer > .link-input-area {
 		width: 100%;
 	}
-	milkdown-image-block > .image-edit .link-importer .placeholder {
+
+	.milkdown .milkdown-image-block > .image-edit .link-importer .placeholder {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -185,17 +227,21 @@ import{css}from"lit";export const style=css`
 		align-items: center;
 		cursor: text;
 	}
-	milkdown-image-block > .image-edit .link-importer .placeholder .uploader {
+
+	.milkdown .milkdown-image-block > .image-edit .link-importer .placeholder .uploader {
 		cursor: pointer;
 		display: flex;
 	}
-	milkdown-image-block .hidden {
+
+	.milkdown .milkdown-image-block .hidden {
 		display: none !important;
 	}
-	milkdown-image-block.selected > .image-edit:not(:has(input:focus)) {
+
+	.milkdown .milkdown-image-block.selected > .image-edit:not(:has(input:focus)) {
 		position: relative;
 	}
-	milkdown-image-block.selected > .image-edit:not(:has(input:focus))::before {
+
+	.milkdown .milkdown-image-block.selected > .image-edit:not(:has(input:focus))::before {
 		content: '';
 		position: absolute;
 		top: 0;
@@ -205,10 +251,12 @@ import{css}from"lit";export const style=css`
 		background: color-mix(in srgb, var(--markdown-color-selected), transparent 60%);
 		pointer-events: none;
 	}
-	milkdown-image-block.selected > .image-wrapper {
+
+	.milkdown .milkdown-image-block.selected > .image-wrapper {
 		position: relative;
 	}
-	milkdown-image-block.selected > .image-wrapper::before {
+
+	.milkdown .milkdown-image-block.selected > .image-wrapper::before {
 		content: '';
 		position: absolute;
 		top: 0;
@@ -217,35 +265,45 @@ import{css}from"lit";export const style=css`
 		bottom: 0;
 		background: color-mix(in srgb, var(--markdown-color-selected), transparent 60%);
 	}
-	milkdown-image-block.selected :not(input)::selection {
+
+	.milkdown .milkdown-image-block.selected :not(input)::selection {
 		background: transparent;
 	}
-	milkdown-image-block .image-wrapper {
+
+	.milkdown .milkdown-image-block .image-wrapper {
 		display: flex;
 		justify-content: center;
 		align-items: center;
 	}
-	milkdown-image-block .image-wrapper .operation {
+
+	.milkdown .milkdown-image-block .image-wrapper .operation {
 		gap: 12px;
 		right: 12px;
 		top: 12px;
 		opacity: 0;
 		transition: all 0.2s;
 	}
-	milkdown-image-block:hover > .image-wrapper .operation {
+
+	.milkdown .milkdown-image-block:hover > .image-wrapper .operation {
 		opacity: 1;
 	}
-	milkdown-image-block .image-wrapper .operation > .operation-item {
+
+	.milkdown .milkdown-image-block .image-wrapper .operation > .operation-item {
 		color: var(--og-text-color);
+		padding: 4px;
 		background: var(--og-accent-color);
 		opacity: 0.6;
 		border-radius: 50%;
-		display: flex;
-		justify-content: center;
-		align-items: center;
+		width: 32px;
+		height: 32px;
+	}
+
+	.milkdown .milkdown-image-block .image-wrapper .operation > .operation-item svg {
+		width: 24px;
+		height: 24px;
 	}
 
-	milkdown-image-block .image-wrapper .image-resize-handle {
+	.milkdown .milkdown-image-block .image-wrapper .image-resize-handle {
 		height: 4px;
 		bottom: -2px;
 		max-width: 160px;
@@ -255,24 +313,29 @@ import{css}from"lit";export const style=css`
 		transition: all 0.2s;
 		border-radius: 4px;
 	}
-	milkdown-image-block:hover > .image-wrapper .image-resize-handle {
+
+	.milkdown .milkdown-image-block:hover > .image-wrapper .image-resize-handle {
 		opacity: 1;
 	}
-	milkdown-image-block .caption-input {
+
+	.milkdown .milkdown-image-block .caption-input {
 		margin: 4px auto;
 		font-family: var(--markdown-font-default);
 	}
-	milkdown-image-block .image-edit {
+
+	.milkdown .milkdown-image-block .image-edit {
 		align-items: center;
 		padding: 16px 24px;
 		gap: 16px;
 		background: var(--markdown-color-surface);
 		height: 56px;
 	}
-	milkdown-image-block .image-edit .image-icon {
+
+	.milkdown .milkdown-image-block .image-edit .image-icon {
 		color: var(--markdown-color-outline);
 	}
-	milkdown-image-block .image-edit .image-icon svg {
+
+	.milkdown .milkdown-image-block .image-edit .image-icon svg {
 		width: 24px;
 		height: 24px;
 		display: flex;
@@ -280,53 +343,53 @@ import{css}from"lit";export const style=css`
 		align-items: center;
 		fill: var(--markdown-color-outline);
 	}
-	milkdown-image-block .image-edit .link-importer .placeholder {
+
+	.milkdown .milkdown-image-block .image-edit .link-importer .placeholder {
 		color: color-mix(in srgb, var(--markdown-color-on-background), transparent 60%);
 	}
-	milkdown-image-block .image-edit .link-importer .placeholder :not(input)::selection {
+
+	.milkdown .milkdown-image-block .image-edit .link-importer .placeholder :not(input)::selection {
 		background: transparent;
 	}
-	milkdown-image-block .image-edit .link-importer .link-input-area {
+
+	.milkdown .milkdown-image-block .image-edit .link-importer .link-input-area {
 		line-height: 24px;
 		color: var(--markdown-color-on-background);
 	}
 
-	milkdown-image-block .image-edit .link-importer .placeholder .uploader {
+	.milkdown .milkdown-image-block .image-edit .link-importer .placeholder .uploader {
 		gap: 8px;
 		color: var(--og-accent-color);
 		justify-content: center;
 		transition: color 0.2s;
 		font-weight: 600;
-		}
+	}
 
-	milkdown-image-block .image-edit .link-importer.focus .placeholder .uploader {
+	.milkdown .milkdown-image-block .image-edit .link-importer.focus .placeholder .uploader {
 		color: unset;
 	}
 
-	milkdown-image-block.image-edit .link-importer .placeholder .uploader:hover {
-		color: var(--og-accent-color);
+	.milkdown .milkdown-image-block .image-edit .link-importer .placeholder .uploader:hover {
+		color: var(--og-text-color);
 	}
 
-	milkdown-image-block .image-edit .link-importer .placeholder .text {
+	.milkdown .milkdown-image-block .image-edit .link-importer .placeholder .text {
 		margin-left: 8px;
 	}
 
-	milkdown-image-block .image-edit .confirm {
+	.milkdown .milkdown-image-block .image-edit .confirm {
 		background: var(--markdown-color-secondary);
 		color: var(--markdown-color-on-secondary);
 		line-height: 40px;
 		padding: 0 24px;
 		border-radius: 100px;
 		font-size: 14px;
-		font-weight: 600;	
+		font-weight: 600;
 	}
 
-	milkdown-image-block .image-edit .confirm:hover {
-		background: linear-gradient(
-			0deg,
-			rgba(29, 25, 43, 0.08) 0%,
-			rgba(29, 25, 43, 0.08) 100%
-		),
-		var(--markdown-color-secondary);
+	.milkdown .milkdown-image-block .image-edit .confirm:hover {
+		background:
+			linear-gradient(0deg, rgba(29, 25, 43, 0.08) 0%, rgba(29, 25, 43, 0.08) 100%),
+			var(--markdown-color-secondary);
 	}
 `;

package/dist/components/styles/image-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-block.js","sourceRoot":"","sources":["../../../src/components/styles/image-block.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2UvB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nexport const style = css`\n\tmilkdown-image-inline {\n\t\toutline: none;\n\t\tdisplay: inline;\n\t}\n\tmilkdown-image-inline input {\n\t\tbackground: transparent;\n\t\toutline: none;\n\t\tborder: 0;\n\t}\n\tmilkdown-image-inline.empty {\n\t\tvertical-align: bottom;\n\t}\n\tmilkdown-image-inline > .empty-image-inline {\n\t\tdisplay: inline-flex;\n\t}\n\tmilkdown-image-inline > .empty-image-inline .confirm {\n\t\tcursor: pointer;\n\t}\n\tmilkdown-image-inline > .empty-image-inline .link-importer {\n\t\tposition: relative;\n\t\tflex: 1;\n\t}\n\tmilkdown-image-inline > .empty-image-inline .link-importer > .link-input-area {\n\t\twidth: 208px;\n\t\tcolor: var(--markdown-color-on-background);\n\t}\n\tmilkdown-image-inline > .empty-image-inline .link-importer .placeholder {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: text;\n\t}\n\tmilkdown-image-inline > .empty-image-inline .link-importer .placeholder .uploader {\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t}\n\tmilkdown-image-inline .hidden {\n\t\tdisplay: none !important;\n\t}\n\tmilkdown-image-inline.empty.selected {\n\t\tbackground: none;\n\t\toutline: none;\n\t}\n\tmilkdown-image-inline.empty.selected .empty-image-inline {\n\t\tbox-shadow: var(--markdown-shadow-1);\n\t}\n\tmilkdown-image-inline.selected {\n\t\tbackground: none;\n\t\toutline: 1px solid var(--og-accent-color);\n\t}\n\tmilkdown-image-inline.selected :not(input)::selection {\n\t\tbackground: transparent;\n\t}\n\tmilkdown-image-inline img.image-inline {\n\t\tvertical-align: text-bottom;\n\t}\n\tmilkdown-image-inline .empty-image-inline {\n\t\talign-items: center;\n\t\tpadding: 4px 10px;\n\t\tgap: 10px;\n\t\tbackground: var(--markdown-color-surface);\n\t\tfont-family: var(--markdown-font-default);\n\t\tborder-radius: 8px;\n\t}\n\tmilkdown-image-inline .empty-image-inline .image-icon {\n\t\tpadding: 3px;\n\t\twidth: 24px;\n\t\theight: 24px;\n\t}\n\tmilkdown-image-inline .empty-image-inline .image-icon svg {\n\t\twidth: 18px;\n\t\theight: 18px;\n\t\tfill: var(--markdown-color-outline);\n\t}\n\tmilkdown-image-inline .empty-image-inline .link-importer {\n\t\theight: 24px;\n\t}\n\tmilkdown-image-inline .empty-image-inline .link-importer .placeholder {\n\t\tcolor: color-mix(in srgb, var(--markdown-color-on-background), transparent 60%);\n\t}\n\tmilkdown-image-inline .empty-image-inline .link-importer .placeholder :not(input)::selection {\n\t\tbackground: transparent;\n\t}\n\tmilkdown-image-inline .empty-image-inline .link-importer .link-input-area {\n\t\tline-height: 24px;\n\t}\n\tmilkdown-image-inline .empty-image-inline .link-importer .placeholder .uploader {\n\t\tgap: 8px;\n\t\tcolor: var(--og-accent-color);\n\t\tjustify-content: center;\n\t\ttransition: color 0.2s;\n\t\tfont-family: var(--markdown-font-default);\n\t}\n\tmilkdown-image-inline .empty-image-inline .link-importer.focus .placeholder .uploader {\n\t\tcolor: unset;\n\t}\n\tmilkdown-image-inline .empty-image-inline .link-importer .placeholder .uploader:hover {\n\t\tcolor: var(--og-accent-color);\n\t}\n\tmilkdown-image-inline .empty-image-inline .link-importer .placeholder .text {\n\t\tmargin-left: 8px;\n\t}\n\tmilkdown-image-inline .empty-image-inline .confirm {\n\t\twidth: 24px;\n\t\theight: 24px;\n\t\tpadding: 3px;\n\t\tborder-radius: 8px;\n\t\tcolor: var(--og-accent-color);\n\t}\n\tmilkdown-image-inline .empty-image-inline .confirm svg {\n\t\twidth: 18px;\n\t\theight: 18px;\n\t}\n\tmilkdown-image-inline .empty-image-inline .confirm:hover {\n\t\tbackground: var(--markdown-color-hover);\n\t}\n\n\tmilkdown-image-block {\n\t\toutline: none;\n\t\tmargin: 4px 0;\n\t\tdisplay: block;\n\t}\n\tmilkdown-image-block > .image-wrapper {\n\t\tposition: relative;\n\t\twidth: fit-content;\n\t\tmargin: 0 auto;\n\t\tmin-width: 100px;\n\t}\n\n\tmilkdown-image-block > .image-wrapper .operation {\n\t\tposition: absolute;\n\t\tdisplay: flex;\n\t}\n\tmilkdown-image-block > .image-wrapper .operation > .operation-item {\n\t\tcursor: pointer;\n\t}\n\tmilkdown-image-block > .image-wrapper img {\n\t\tmax-width: 100%;\n\t\tmin-height: 100px;\n\t\tdisplay: block;\n\t\tobject-fit: cover;\n\t}\n\tmilkdown-image-block > .image-wrapper > .image-resize-handle {\n\t\tposition: absolute;\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t}\n\tmilkdown-image-block > .image-wrapper > .image-resize-handle:hover {\n\t\tcursor: row-resize;\n\t}\n\tmilkdown-image-block input {\n\t\tbackground: transparent;\n\t\toutline: none;\n\t\tborder: 0;\n\t}\n\tmilkdown-image-block > .caption-input {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\ttext-align: center;\n\t\tcolor: var(--markdown-color-on-background);\n\t}\n\tmilkdown-image-block > .image-edit {\n\t\tdisplay: flex;\n\t}\n\tmilkdown-image-block > .image-edit .confirm {\n\t\tcursor: pointer;\n\t}\n\tmilkdown-image-block > .image-edit .link-importer {\n\t\tposition: relative;\n\t\tflex: 1;\n\t}\n\tmilkdown-image-block > .image-edit .link-importer > .link-input-area {\n\t\twidth: 100%;\n\t}\n\tmilkdown-image-block > .image-edit .link-importer .placeholder {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: text;\n\t}\n\tmilkdown-image-block > .image-edit .link-importer .placeholder .uploader {\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t}\n\tmilkdown-image-block .hidden {\n\t\tdisplay: none !important;\n\t}\n\tmilkdown-image-block.selected > .image-edit:not(:has(input:focus)) {\n\t\tposition: relative;\n\t}\n\tmilkdown-image-block.selected > .image-edit:not(:has(input:focus))::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tbackground: color-mix(in srgb, var(--markdown-color-selected), transparent 60%);\n\t\tpointer-events: none;\n\t}\n\tmilkdown-image-block.selected > .image-wrapper {\n\t\tposition: relative;\n\t}\n\tmilkdown-image-block.selected > .image-wrapper::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tbackground: color-mix(in srgb, var(--markdown-color-selected), transparent 60%);\n\t}\n\tmilkdown-image-block.selected :not(input)::selection {\n\t\tbackground: transparent;\n\t}\n\tmilkdown-image-block .image-wrapper {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\tmilkdown-image-block .image-wrapper .operation {\n\t\tgap: 12px;\n\t\tright: 12px;\n\t\ttop: 12px;\n\t\topacity: 0;\n\t\ttransition: all 0.2s;\n\t}\n\tmilkdown-image-block:hover > .image-wrapper .operation {\n\t\topacity: 1;\n\t}\n\tmilkdown-image-block .image-wrapper .operation > .operation-item {\n\t\tcolor: var(--og-text-color);\n\t\tbackground: var(--og-accent-color);\n\t\topacity: 0.6;\n\t\tborder-radius: 50%;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\tmilkdown-image-block .image-wrapper .image-resize-handle {\n\t\theight: 4px;\n\t\tbottom: -2px;\n\t\tmax-width: 160px;\n\t\twidth: 100%;\n\t\tbackground: var(--markdown-color-outline);\n\t\topacity: 0;\n\t\ttransition: all 0.2s;\n\t\tborder-radius: 4px;\n\t}\n\tmilkdown-image-block:hover > .image-wrapper .image-resize-handle {\n\t\topacity: 1;\n\t}\n\tmilkdown-image-block .caption-input {\n\t\tmargin: 4px auto;\n\t\tfont-family: var(--markdown-font-default);\n\t}\n\tmilkdown-image-block .image-edit {\n\t\talign-items: center;\n\t\tpadding: 16px 24px;\n\t\tgap: 16px;\n\t\tbackground: var(--markdown-color-surface);\n\t\theight: 56px;\n\t}\n\tmilkdown-image-block .image-edit .image-icon {\n\t\tcolor: var(--markdown-color-outline);\n\t}\n\tmilkdown-image-block .image-edit .image-icon svg {\n\t\twidth: 24px;\n\t\theight: 24px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tfill: var(--markdown-color-outline);\n\t}\n\tmilkdown-image-block .image-edit .link-importer .placeholder {\n\t\tcolor: color-mix(in srgb, var(--markdown-color-on-background), transparent 60%);\n\t}\n\tmilkdown-image-block .image-edit .link-importer .placeholder :not(input)::selection {\n\t\tbackground: transparent;\n\t}\n\tmilkdown-image-block .image-edit .link-importer .link-input-area {\n\t\tline-height: 24px;\n\t\tcolor: var(--markdown-color-on-background);\n\t}\n\n\tmilkdown-image-block .image-edit .link-importer .placeholder .uploader {\n\t\tgap: 8px;\n\t\tcolor: var(--og-accent-color);\n\t\tjustify-content: center;\n\t\ttransition: color 0.2s;\n\t\tfont-weight: 600;\n\t\t}\n\n\tmilkdown-image-block .image-edit .link-importer.focus .placeholder .uploader {\n\t\tcolor: unset;\n\t}\n\n\tmilkdown-image-block.image-edit .link-importer .placeholder .uploader:hover {\n\t\tcolor: var(--og-accent-color);\n\t}\n\n\tmilkdown-image-block .image-edit .link-importer .placeholder .text {\n\t\tmargin-left: 8px;\n\t}\n\n\tmilkdown-image-block .image-edit .confirm {\n\t\tbackground: var(--markdown-color-secondary);\n\t\tcolor: var(--markdown-color-on-secondary);\n\t\tline-height: 40px;\n\t\tpadding: 0 24px;\n\t\tborder-radius: 100px;\n\t\tfont-size: 14px;\n\t\tfont-weight: 600;\t\n\t}\n\n\tmilkdown-image-block .image-edit .confirm:hover {\n\t\tbackground: linear-gradient(\n\t\t\t0deg,\n\t\t\trgba(29, 25, 43, 0.08) 0%,\n\t\t\trgba(29, 25, 43, 0.08) 100%\n\t\t),\n\t\tvar(--markdown-color-secondary);\n\t}\n`;\n"]}
+{"version":3,"file":"image-block.js","sourceRoot":"","sources":["../../../src/components/styles/image-block.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0YvB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nexport const style = css`\n\t/* inline image */\n\n\t.milkdown .milkdown-image-inline {\n\t\toutline: none;\n\t\tdisplay: inline-flex;\n\t\tvertical-align: text-bottom;\n\t}\n\n\t.milkdown .milkdown-image-inline input {\n\t\tbackground: transparent;\n\t\toutline: none;\n\t\tborder: 0;\n\t\tcaret-color: var(--markdown-color-outline);\n\t}\n\n\t.milkdown .milkdown-image-inline > .empty-image-inline {\n\t\tdisplay: inline-flex;\n\t}\n\n\t.milkdown .milkdown-image-inline > .empty-image-inline .confirm {\n\t\tcursor: pointer;\n\t}\n\n\t.milkdown .milkdown-image-inline > .empty-image-inline .link-importer {\n\t\tposition: relative;\n\t\tflex: 1;\n\t}\n\n\t.milkdown .milkdown-image-inline > .empty-image-inline .link-importer > .link-input-area {\n\t\twidth: 208px;\n\t\tcolor: var(--markdown-color-on-background);\n\t\tdisplay: flex;\n\t}\n\n\t.milkdown .milkdown-image-inline > .empty-image-inline .link-importer .placeholder {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: text;\n\t}\n\n\t.milkdown .milkdown-image-inline > .empty-image-inline .link-importer .placeholder .uploader {\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t}\n\n\t.milkdown .milkdown-image-inline .hidden {\n\t\tdisplay: none !important;\n\t}\n\n\t.milkdown .milkdown-image-inline.empty.selected {\n\t\tbackground: none;\n\t\toutline: none;\n\t}\n\n\t.milkdown .milkdown-image-inline.empty.selected .empty-image-inline {\n\t\tbox-shadow: var(--markdown-shadow-1);\n\t}\n\n\t.milkdown .milkdown-image-inline.selected {\n\t\tbackground: none;\n\t\toutline: 1px solid var(--markdown-color-primary);\n\t}\n\n\t.milkdown .milkdown-image-inline.selected :not(input)::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.milkdown .milkdown-image-inline .empty-image-inline {\n\t\talign-items: center;\n\t\tpadding: 4px 10px;\n\t\tgap: 10px;\n\t\tbackground: var(--markdown-color-surface);\n\t\tfont-family: var(--markdown-font-default);\n\t\tborder-radius: 8px;\n\t\tfont-size: 16px;\n\t}\n\n\t.milkdown .milkdown-image-inline .empty-image-inline .image-icon {\n\t\tpadding: 3px;\n\t\twidth: 24px;\n\t\theight: 24px;\n\t}\n\n\t.milkdown .milkdown-image-inline .empty-image-inline .image-icon svg {\n\t\twidth: 18px;\n\t\theight: 18px;\n\t\tfill: var(--markdown-color-outline);\n\t}\n\n\t.milkdown .milkdown-image-inline .empty-image-inline .link-importer {\n\t\theight: 24px;\n\t}\n\n\t.milkdown .milkdown-image-inline .empty-image-inline .link-importer .placeholder {\n\t\tcolor: color-mix(in srgb, var(--markdown-color-on-background), transparent 60%);\n\t}\n\n\t.milkdown .milkdown-image-inline .empty-image-inline .link-importer .placeholder :not(input)::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.milkdown .milkdown-image-inline .empty-image-inline .link-importer .link-input-area {\n\t\tline-height: 24px;\n\t}\n\n\t.milkdown .milkdown-image-inline .empty-image-inline .link-importer .placeholder .uploader {\n\t\tgap: 8px;\n\t\tcolor: var(--og-accent-color);\n\t\tjustify-content: center;\n\t\ttransition: color 0.2s;\n\t\tfont-family: var(--markdown-font-default);\n\t}\n\n\t.milkdown .milkdown-image-inline .empty-image-inline .link-importer.focus .placeholder .uploader {\n\t\tcolor: unset;\n\t}\n\n\t.milkdown .milkdown-image-inline .empty-image-inline .link-importer .placeholder .uploader:hover {\n\t\tcolor: var(--og-accent-color);\n\t}\n\n\t.milkdown .milkdown-image-inline .empty-image-inline .link-importer .placeholder .text {\n\t\tmargin-left: 8px;\n\t}\n\n\t.milkdown .milkdown-image-inline .empty-image-inline .confirm {\n\t\tdisplay: flex;\n\t\twidth: 24px;\n\t\theight: 24px;\n\t\tpadding: 3px;\n\t\tborder-radius: 8px;\n\t\tcolor: var(--og-accent-color);\n\t}\n\n\t.milkdown .milkdown-image-inline .empty-image-inline .confirm svg {\n\t\twidth: 18px;\n\t\theight: 18px;\n\t}\n\n\t.milkdown .milkdown-image-inline .empty-image-inline .confirm:hover {\n\t\tbackground: var(--markdown-color-hover);\n\t}\n\n\t/* image block */\n\n\t.milkdown .milkdown-image-block {\n\t\toutline: none;\n\t\tmargin: 4px 0;\n\t\tdisplay: block;\n\t}\n\n\t.milkdown .milkdown-image-block > .image-wrapper {\n\t\tposition: relative;\n\t\twidth: fit-content;\n\t\tmargin: 0 auto;\n\t\tmin-width: 100px;\n\t}\n\n\t.milkdown .milkdown-image-block > .image-wrapper .operation {\n\t\tposition: absolute;\n\t\tdisplay: flex;\n\t}\n\n\t.milkdown .milkdown-image-block > .image-wrapper .operation > .operation-item {\n\t\tcursor: pointer;\n\t}\n\n\t.milkdown .milkdown-image-block > .image-wrapper img {\n\t\tmax-width: 100%;\n\t\tmin-height: 100px;\n\t\tdisplay: block;\n\t\tobject-fit: cover;\n\t}\n\n\t.milkdown .milkdown-image-block > .image-wrapper > .image-resize-handle {\n\t\tposition: absolute;\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t}\n\n\t.milkdown .milkdown-image-block > .image-wrapper > .image-resize-handle:hover {\n\t\tcursor: row-resize;\n\t}\n\n\t.milkdown .milkdown-image-block input {\n\t\tbackground: transparent;\n\t\toutline: none;\n\t\tborder: 0;\n\t\tcaret-color: var(--markdown-color-outline);\n\t}\n\n\t.milkdown .milkdown-image-block > .caption-input {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\ttext-align: center;\n\t\tcolor: var(--markdown-color-on-background);\n\t}\n\n\t.milkdown .milkdown-image-block > .image-edit {\n\t\tdisplay: flex;\n\t}\n\n\t.milkdown .milkdown-image-block > .image-edit .confirm {\n\t\tcursor: pointer;\n\t}\n\n\t.milkdown .milkdown-image-block > .image-edit .link-importer {\n\t\tposition: relative;\n\t\tflex: 1;\n\t}\n\n\t.milkdown .milkdown-image-block > .image-edit .link-importer > .link-input-area {\n\t\twidth: 100%;\n\t}\n\n\t.milkdown .milkdown-image-block > .image-edit .link-importer .placeholder {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: text;\n\t}\n\n\t.milkdown .milkdown-image-block > .image-edit .link-importer .placeholder .uploader {\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t}\n\n\t.milkdown .milkdown-image-block .hidden {\n\t\tdisplay: none !important;\n\t}\n\n\t.milkdown .milkdown-image-block.selected > .image-edit:not(:has(input:focus)) {\n\t\tposition: relative;\n\t}\n\n\t.milkdown .milkdown-image-block.selected > .image-edit:not(:has(input:focus))::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tbackground: color-mix(in srgb, var(--markdown-color-selected), transparent 60%);\n\t\tpointer-events: none;\n\t}\n\n\t.milkdown .milkdown-image-block.selected > .image-wrapper {\n\t\tposition: relative;\n\t}\n\n\t.milkdown .milkdown-image-block.selected > .image-wrapper::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tbackground: color-mix(in srgb, var(--markdown-color-selected), transparent 60%);\n\t}\n\n\t.milkdown .milkdown-image-block.selected :not(input)::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.milkdown .milkdown-image-block .image-wrapper {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t.milkdown .milkdown-image-block .image-wrapper .operation {\n\t\tgap: 12px;\n\t\tright: 12px;\n\t\ttop: 12px;\n\t\topacity: 0;\n\t\ttransition: all 0.2s;\n\t}\n\n\t.milkdown .milkdown-image-block:hover > .image-wrapper .operation {\n\t\topacity: 1;\n\t}\n\n\t.milkdown .milkdown-image-block .image-wrapper .operation > .operation-item {\n\t\tcolor: var(--og-text-color);\n\t\tpadding: 4px;\n\t\tbackground: var(--og-accent-color);\n\t\topacity: 0.6;\n\t\tborder-radius: 50%;\n\t\twidth: 32px;\n\t\theight: 32px;\n\t}\n\n\t.milkdown .milkdown-image-block .image-wrapper .operation > .operation-item svg {\n\t\twidth: 24px;\n\t\theight: 24px;\n\t}\n\n\t.milkdown .milkdown-image-block .image-wrapper .image-resize-handle {\n\t\theight: 4px;\n\t\tbottom: -2px;\n\t\tmax-width: 160px;\n\t\twidth: 100%;\n\t\tbackground: var(--markdown-color-outline);\n\t\topacity: 0;\n\t\ttransition: all 0.2s;\n\t\tborder-radius: 4px;\n\t}\n\n\t.milkdown .milkdown-image-block:hover > .image-wrapper .image-resize-handle {\n\t\topacity: 1;\n\t}\n\n\t.milkdown .milkdown-image-block .caption-input {\n\t\tmargin: 4px auto;\n\t\tfont-family: var(--markdown-font-default);\n\t}\n\n\t.milkdown .milkdown-image-block .image-edit {\n\t\talign-items: center;\n\t\tpadding: 16px 24px;\n\t\tgap: 16px;\n\t\tbackground: var(--markdown-color-surface);\n\t\theight: 56px;\n\t}\n\n\t.milkdown .milkdown-image-block .image-edit .image-icon {\n\t\tcolor: var(--markdown-color-outline);\n\t}\n\n\t.milkdown .milkdown-image-block .image-edit .image-icon svg {\n\t\twidth: 24px;\n\t\theight: 24px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tfill: var(--markdown-color-outline);\n\t}\n\n\t.milkdown .milkdown-image-block .image-edit .link-importer .placeholder {\n\t\tcolor: color-mix(in srgb, var(--markdown-color-on-background), transparent 60%);\n\t}\n\n\t.milkdown .milkdown-image-block .image-edit .link-importer .placeholder :not(input)::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.milkdown .milkdown-image-block .image-edit .link-importer .link-input-area {\n\t\tline-height: 24px;\n\t\tcolor: var(--markdown-color-on-background);\n\t}\n\n\t.milkdown .milkdown-image-block .image-edit .link-importer .placeholder .uploader {\n\t\tgap: 8px;\n\t\tcolor: var(--og-accent-color);\n\t\tjustify-content: center;\n\t\ttransition: color 0.2s;\n\t\tfont-weight: 600;\n\t}\n\n\t.milkdown .milkdown-image-block .image-edit .link-importer.focus .placeholder .uploader {\n\t\tcolor: unset;\n\t}\n\n\t.milkdown .milkdown-image-block .image-edit .link-importer .placeholder .uploader:hover {\n\t\tcolor: var(--og-text-color);\n\t}\n\n\t.milkdown .milkdown-image-block .image-edit .link-importer .placeholder .text {\n\t\tmargin-left: 8px;\n\t}\n\n\t.milkdown .milkdown-image-block .image-edit .confirm {\n\t\tbackground: var(--markdown-color-secondary);\n\t\tcolor: var(--markdown-color-on-secondary);\n\t\tline-height: 40px;\n\t\tpadding: 0 24px;\n\t\tborder-radius: 100px;\n\t\tfont-size: 14px;\n\t\tfont-weight: 600;\n\t}\n\n\t.milkdown .milkdown-image-block .image-edit .confirm:hover {\n\t\tbackground:\n\t\t\tlinear-gradient(0deg, rgba(29, 25, 43, 0.08) 0%, rgba(29, 25, 43, 0.08) 100%),\n\t\t\tvar(--markdown-color-secondary);\n\t}\n`;\n"]}

package/dist/components/styles/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/styles/table.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,yBAwOjB,CAAC"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/styles/table.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,yBA0RjB,CAAC"}

package/dist/components/styles/table.js

@@ -49,34 +49,44 @@ import{css}from"lit";export const style=css`
 		pointer-events: none;
 	}
 
-	milkdown-table-block {
+	.milkdown-table-block {
 		display: block;
 		margin: 4px 0;
 	}
-	milkdown-table-block th,
-	milkdown-table-block td {
-		border: 1px solid var(--og-border-color);
-		padding: 4px 16px;
+
+	.milkdown .milkdown-table-block table {
+		margin: 0 !important;
+	}
+
+	.milkdown .milkdown-table-block th,
+	.milkdown .milkdown-table-block td {
+		border: 1px solid color-mix(in srgb, var(--og-border-color-3), transparent 80%);
+		padding: 2px 10px;
 	}
-	milkdown-table-block th .ProseMirror-selectednode,
-	milkdown-table-block td .ProseMirror-selectednode {
+
+	.milkdown .milkdown-table-block th .ProseMirror-selectednode,
+	.milkdown .milkdown-table-block td .ProseMirror-selectednode {
 		background-color: transparent !important;
 	}
-	milkdown-table-block th:has(.ProseMirror-selectednode),
-	milkdown-table-block td:has(.ProseMirror-selectednode) {
+
+	.milkdown .milkdown-table-block th:has(.ProseMirror-selectednode),
+	.milkdown .milkdown-table-block td:has(.ProseMirror-selectednode) {
 		outline: 1px solid var(--markdown-color-primary);
 		outline-offset: -1px;
 	}
 
-	milkdown-table-block .selectedCell::after {
+	.milkdown .milkdown-table-block .selectedCell::after {
 		background-color: var(--markdown-color-selected);
 		opacity: 0.4;
 	}
-	milkdown-table-block .selectedCell::selection {
+
+	.milkdown .milkdown-table-block .selectedCell ::selection {
 		background: transparent;
 	}
 
-	milkdown-table-block .drag-preview {
+	/* drag preview */
+
+	.milkdown .milkdown-table-block .drag-preview {
 		background-color: var(--markdown-color-surface);
 		opacity: 0.4;
 		position: absolute;
@@ -86,28 +96,35 @@ import{css}from"lit";export const style=css`
 		outline: 1px solid var(--markdown-color-primary);
 		outline-offset: -1px;
 	}
-	milkdown-table-block .drag-preview[data-show='false'] {
+
+	.milkdown .milkdown-table-block .drag-preview[data-show='false'] {
 		display: none;
 	}
-	milkdown-table-block .drag-preview th:has(.ProseMirror-selectednode),
-	milkdown-table-block .drag-preview td:has(.ProseMirror-selectednode) {
+
+	.milkdown .milkdown-table-block .drag-preview th:has(.ProseMirror-selectednode),
+	.milkdown .milkdown-table-block .drag-preview td:has(.ProseMirror-selectednode) {
 		outline: none;
 	}
 
-	milkdown-table-block .handle {
+	/* handle */
+
+	.milkdown .milkdown-table-block .handle {
 		position: absolute;
-		font-size: 12px;
+		font-size: 14px;
 		transition: opacity ease-in-out 0.2s;
 	}
-	milkdown-table-block .handle[data-show='false'] {
+
+	.milkdown .milkdown-table-block .handle[data-show='false'] {
 		opacity: 0;
 	}
 
-	milkdown-table-block svg {
+	.milkdown .milkdown-table-block svg {
 		fill: var(--markdown-color-outline);
 	}
 
-	milkdown-table-block .cell-handle {
+	/* cell handle */
+
+	.milkdown .milkdown-table-block .cell-handle {
 		z-index: 50;
 		left: -999px;
 		top: -999px;
@@ -115,38 +132,48 @@ import{css}from"lit";export const style=css`
 		background-color: var(--og-accent-color);
 		color: var(--og-text-color-2);
 		border-radius: 100px;
+		box-shadow: var(--markdown-shadow-1);
 		transition: background-color 0.2s ease-in-out;
 	}
-	milkdown-table-block .cell-handle:hover {
+
+	.milkdown .milkdown-table-block .cell-handle:hover {
 		background-color: var(--og-accent-color-highlight);
+		opacity: 1;
 	}
-	milkdown-table-block .cell-handle:has(.button-group:hover) {
+
+	.milkdown .milkdown-table-block .cell-handle:has(.button-group:hover) {
 		background-color: var(--og-accent-color-highlight);
 	}
-	milkdown-table-block .cell-handle[data-role='col-drag-handle'] {
+
+	.milkdown .milkdown-table-block .cell-handle[data-role='col-drag-handle'] {
 		transform: translateY(50%);
 		padding: 0 6px;
 		width: 28px;
 		height: 16px;
 	}
-	milkdown-table-block .cell-handle[data-role='row-drag-handle'] {
+
+	.milkdown .milkdown-table-block .cell-handle[data-role='row-drag-handle'] {
 		transform: translateX(50%);
 		padding: 6px 0;
 		width: 16px;
 		height: 28px;
 	}
-	milkdown-table-block .cell-handle .button-group {
+
+	/* button group */
+
+	.milkdown .milkdown-table-block .cell-handle .button-group {
 		position: absolute;
 		transform: translateX(-50%);
 		left: 50%;
-		top: -52px;
+		top: -10px;
 		display: flex;
-		gap: 2px;
 		background-color: var(--og-background-color);
 		border: 1px solid var(--og-accent-color);
-		padding: 2px;
+		border-radius: var(--og-base-radius);
+		box-shadow: var(--markdown-shadow-1);
 	}
-	milkdown-table-block .cell-handle .button-group::after {
+
+	.milkdown .milkdown-table-block .cell-handle .button-group::after {
 		content: '';
 		position: absolute;
 		bottom: -8px;
@@ -154,80 +181,103 @@ import{css}from"lit";export const style=css`
 		background-color: transparent;
 		width: 100%;
 	}
-	milkdown-table-block .cell-handle .button-group[data-show='false'] {
+
+	.milkdown .milkdown-table-block .cell-handle .button-group[data-show='false'] {
 		display: none;
 	}
-	milkdown-table-block .cell-handle .button-group button {
+
+	.milkdown .milkdown-table-block .cell-handle .button-group button {
 		background-color: var(--og-accent-color);
 		color: var(--og-text-color-2);
 		cursor: pointer;
-		min-width: 20px;
-		height: 20px;
+		margin: 6px;
+		padding: 4px;
 		display: flex;
 		justify-content: center;
 		align-items: center;
+		border-radius: 4px;
 	}
-	milkdown-table-block .cell-handle .button-group button:hover {
+
+	.milkdown .milkdown-table-block .cell-handle .button-group button svg {
+		width: 24px;
+		height: 24px;
+	}
+
+	.milkdown .milkdown-table-block .cell-handle .button-group button:hover {
+		border-radius: var(--og-base-radius);
 		background-color: var(--og-accent-color-highlight);
 	}
-	milkdown-table-block .cell-handle .button-group button:active {
+
+	.milkdown .milkdown-table-block .cell-handle .button-group button:active {
 		background: var(--markdown-color-selected);
 	}
-	milkdown-table-block .cell-handle:hover {
-		opacity: 1;
-	}
 
-	milkdown-table-block .line-handle {
+	/* line handle */
+
+	.milkdown .milkdown-table-block .line-handle {
 		z-index: 20;
 		background-color: var(--markdown-color-primary);
 	}
-	milkdown-table-block .line-handle:hover {
+
+	.milkdown .milkdown-table-block .line-handle:hover {
 		opacity: 1;
 	}
-	milkdown-table-block .line-handle .add-button {
+
+	.milkdown .milkdown-table-block .line-handle .add-button {
 		cursor: pointer;
 		background-color: var(--og-accent-color);
 		color: var(--og-text-color-2);
 		border-radius: 100px;
+		box-shadow: var(--markdown-shadow-1);
 		transition: background-color 0.2s ease-in-out;
 	}
-	milkdown-table-block .line-handle .add-button > svg {
+
+	.milkdown .milkdown-table-block .line-handle .add-button svg {
 		width: 16px;
 		height: 16px;
 	}
-	milkdown-table-block .line-handle .add-button:hover {
+
+	.milkdown .milkdown-table-block .line-handle .add-button:hover {
 		background-color: var(--og-accent-color-highlight);
 	}
-	milkdown-table-block .line-handle .add-button:active {
+
+	.milkdown .milkdown-table-block .line-handle .add-button:active {
 		background: var(--markdown-color-selected);
 	}
-	milkdown-table-block .line-handle[data-role='x-line-drag-handle'] {
+
+	.milkdown .milkdown-table-block .line-handle[data-role='x-line-drag-handle'] {
 		height: 1px;
 		z-index: 2;
 	}
-	milkdown-table-block .line-handle[data-role='x-line-drag-handle'] .add-button {
+
+	.milkdown .milkdown-table-block .line-handle[data-role='x-line-drag-handle'] .add-button {
 		position: absolute;
 		transform: translateX(-50%) translateY(-50%);
 		padding: 6px 0;
 		width: 16px;
 		height: 28px;
 	}
-	milkdown-table-block .line-handle[data-role='y-line-drag-handle'] {
+
+	.milkdown .milkdown-table-block .line-handle[data-role='y-line-drag-handle'] {
 		width: 1px;
 		z-index: 1;
 	}
-	milkdown-table-block .line-handle[data-role='y-line-drag-handle'] .add-button {
+
+	.milkdown .milkdown-table-block .line-handle[data-role='y-line-drag-handle'] .add-button {
 		position: absolute;
 		transform: translateY(-50%) translateX(-50%);
 		padding: 0 6px;
 		width: 28px;
 		height: 16px;
 	}
-	milkdown-table-block .line-handle[data-display-type='indicator'] .add-button {
+
+	.milkdown .milkdown-table-block .line-handle[data-display-type='indicator'] .add-button {
 		display: none;
 	}
 
-	milkdown-table-block.readonly .handle {
+	/* readonly */
+
+	.milkdown .milkdown-table-block.readonly .handle {
 		display: none;
 	}
 `;

package/dist/components/styles/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/components/styles/table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwOvB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nexport const style = css`\n\t.ProseMirror .tableWrapper {\n\t\toverflow-x: auto;\n\t}\n\t.ProseMirror table {\n\t\tborder-collapse: collapse;\n\t\ttable-layout: fixed;\n\t\twidth: 100%;\n\t\toverflow: hidden;\n\t}\n\t.ProseMirror td, .ProseMirror th {\n\t\tvertical-align: top;\n\t\tbox-sizing: border-box;\n\t\tposition: relative;\n\t}\n\t\t\n\t.ProseMirror td:not([data-colwidth]):not(.column-resize-dragging),\n\t.ProseMirror th:not([data-colwidth]):not(.column-resize-dragging) {\n\t\t/* if there's no explicit width set and the column is not being resized, set a default width */\n\t\tmin-width: var(--default-cell-min-width);\n\t}\n\t\t\n\t.ProseMirror .column-resize-handle {\n\t\tposition: absolute;\n\t\tright: -2px;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: 4px;\n\t\tz-index: 20;\n\t\tbackground-color: #adf;\n\t\tpointer-events: none;\n\t}\n\n\t.ProseMirror.resize-cursor {\n\t\tcursor: ew-resize;\n\t\tcursor: col-resize;\n\t}\n\n\t/* Give selected cells a blue overlay */\n\t.ProseMirror .selectedCell:after {\n\t\tz-index: 2;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tleft: 0;\n\t\tright: 0;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\tbackground: rgba(200, 200, 255, 0.4);\n\t\tpointer-events: none;\n\t}\n\n\tmilkdown-table-block {\n\t\tdisplay: block;\n\t\tmargin: 4px 0;\n\t}\n\tmilkdown-table-block th,\n\tmilkdown-table-block td {\n\t\tborder: 1px solid var(--og-border-color);\n\t\tpadding: 4px 16px;\n\t}\n\tmilkdown-table-block th .ProseMirror-selectednode,\n\tmilkdown-table-block td .ProseMirror-selectednode {\n\t\tbackground-color: transparent !important;\n\t}\n\tmilkdown-table-block th:has(.ProseMirror-selectednode),\n\tmilkdown-table-block td:has(.ProseMirror-selectednode) {\n\t\toutline: 1px solid var(--markdown-color-primary);\n\t\toutline-offset: -1px;\n\t}\n\n\tmilkdown-table-block .selectedCell::after {\n\t\tbackground-color: var(--markdown-color-selected);\n\t\topacity: 0.4;\n\t}\n\tmilkdown-table-block .selectedCell::selection {\n\t\tbackground: transparent;\n\t}\n\n\tmilkdown-table-block .drag-preview {\n\t\tbackground-color: var(--markdown-color-surface);\n\t\topacity: 0.4;\n\t\tposition: absolute;\n\t\tz-index: 100;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\toutline: 1px solid var(--markdown-color-primary);\n\t\toutline-offset: -1px;\n\t}\n\tmilkdown-table-block .drag-preview[data-show='false'] {\n\t\tdisplay: none;\n\t}\n\tmilkdown-table-block .drag-preview th:has(.ProseMirror-selectednode),\n\tmilkdown-table-block .drag-preview td:has(.ProseMirror-selectednode) {\n\t\toutline: none;\n\t}\n\n\tmilkdown-table-block .handle {\n\t\tposition: absolute;\n\t\tfont-size: 12px;\n\t\ttransition: opacity ease-in-out 0.2s;\n\t}\n\tmilkdown-table-block .handle[data-show='false'] {\n\t\topacity: 0;\n\t}\n\n\tmilkdown-table-block svg {\n\t\tfill: var(--markdown-color-outline);\n\t}\n\n\tmilkdown-table-block .cell-handle {\n\t\tz-index: 50;\n\t\tleft: -999px;\n\t\ttop: -999px;\n\t\tcursor: grab;\n\t\tbackground-color: var(--og-accent-color);\n\t\tcolor: var(--og-text-color-2);\n\t\tborder-radius: 100px;\n\t\ttransition: background-color 0.2s ease-in-out;\n\t}\n\tmilkdown-table-block .cell-handle:hover {\n\t\tbackground-color: var(--og-accent-color-highlight);\n\t}\n\tmilkdown-table-block .cell-handle:has(.button-group:hover) {\n\t\tbackground-color: var(--og-accent-color-highlight);\n\t}\n\tmilkdown-table-block .cell-handle[data-role='col-drag-handle'] {\n\t\ttransform: translateY(50%);\n\t\tpadding: 0 6px;\n\t\twidth: 28px;\n\t\theight: 16px;\n\t}\n\tmilkdown-table-block .cell-handle[data-role='row-drag-handle'] {\n\t\ttransform: translateX(50%);\n\t\tpadding: 6px 0;\n\t\twidth: 16px;\n\t\theight: 28px;\n\t}\n\tmilkdown-table-block .cell-handle .button-group {\n\t\tposition: absolute;\n\t\ttransform: translateX(-50%);\n\t\tleft: 50%;\n\t\ttop: -52px;\n\t\tdisplay: flex;\n\t\tgap: 2px;\n\t\tbackground-color: var(--og-background-color);\n\t\tborder: 1px solid var(--og-accent-color);\n\t\tpadding: 2px;\n\t}\n\tmilkdown-table-block .cell-handle .button-group::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tbottom: -8px;\n\t\theight: 8px;\n\t\tbackground-color: transparent;\n\t\twidth: 100%;\n\t}\n\tmilkdown-table-block .cell-handle .button-group[data-show='false'] {\n\t\tdisplay: none;\n\t}\n\tmilkdown-table-block .cell-handle .button-group button {\n\t\tbackground-color: var(--og-accent-color);\n\t\tcolor: var(--og-text-color-2);\n\t\tcursor: pointer;\n\t\tmin-width: 20px;\n\t\theight: 20px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\tmilkdown-table-block .cell-handle .button-group button:hover {\n\t\tbackground-color: var(--og-accent-color-highlight);\n\t}\n\tmilkdown-table-block .cell-handle .button-group button:active {\n\t\tbackground: var(--markdown-color-selected);\n\t}\n\tmilkdown-table-block .cell-handle:hover {\n\t\topacity: 1;\n\t}\n\n\tmilkdown-table-block .line-handle {\n\t\tz-index: 20;\n\t\tbackground-color: var(--markdown-color-primary);\n\t}\n\tmilkdown-table-block .line-handle:hover {\n\t\topacity: 1;\n\t}\n\tmilkdown-table-block .line-handle .add-button {\n\t\tcursor: pointer;\n\t\tbackground-color: var(--og-accent-color);\n\t\tcolor: var(--og-text-color-2);\n\t\tborder-radius: 100px;\n\t\ttransition: background-color 0.2s ease-in-out;\n\t}\n\tmilkdown-table-block .line-handle .add-button > svg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t}\n\tmilkdown-table-block .line-handle .add-button:hover {\n\t\tbackground-color: var(--og-accent-color-highlight);\n\t}\n\tmilkdown-table-block .line-handle .add-button:active {\n\t\tbackground: var(--markdown-color-selected);\n\t}\n\tmilkdown-table-block .line-handle[data-role='x-line-drag-handle'] {\n\t\theight: 1px;\n\t\tz-index: 2;\n\t}\n\tmilkdown-table-block .line-handle[data-role='x-line-drag-handle'] .add-button {\n\t\tposition: absolute;\n\t\ttransform: translateX(-50%) translateY(-50%);\n\t\tpadding: 6px 0;\n\t\twidth: 16px;\n\t\theight: 28px;\n\t}\n\tmilkdown-table-block .line-handle[data-role='y-line-drag-handle'] {\n\t\twidth: 1px;\n\t\tz-index: 1;\n\t}\n\tmilkdown-table-block .line-handle[data-role='y-line-drag-handle'] .add-button {\n\t\tposition: absolute;\n\t\ttransform: translateY(-50%) translateX(-50%);\n\t\tpadding: 0 6px;\n\t\twidth: 28px;\n\t\theight: 16px;\n\t}\n\tmilkdown-table-block .line-handle[data-display-type='indicator'] .add-button {\n\t\tdisplay: none;\n\t}\n\n\tmilkdown-table-block.readonly .handle {\n\t\tdisplay: none;\n\t}\n`;\n"]}
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/components/styles/table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0RvB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nexport const style = css`\n\t.ProseMirror .tableWrapper {\n\t\toverflow-x: auto;\n\t}\n\t.ProseMirror table {\n\t\tborder-collapse: collapse;\n\t\ttable-layout: fixed;\n\t\twidth: 100%;\n\t\toverflow: hidden;\n\t}\n\t.ProseMirror td, .ProseMirror th {\n\t\tvertical-align: top;\n\t\tbox-sizing: border-box;\n\t\tposition: relative;\n\t}\n\t\t\n\t.ProseMirror td:not([data-colwidth]):not(.column-resize-dragging),\n\t.ProseMirror th:not([data-colwidth]):not(.column-resize-dragging) {\n\t\t/* if there's no explicit width set and the column is not being resized, set a default width */\n\t\tmin-width: var(--default-cell-min-width);\n\t}\n\t\t\n\t.ProseMirror .column-resize-handle {\n\t\tposition: absolute;\n\t\tright: -2px;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: 4px;\n\t\tz-index: 20;\n\t\tbackground-color: #adf;\n\t\tpointer-events: none;\n\t}\n\n\t.ProseMirror.resize-cursor {\n\t\tcursor: ew-resize;\n\t\tcursor: col-resize;\n\t}\n\n\t/* Give selected cells a blue overlay */\n\t.ProseMirror .selectedCell:after {\n\t\tz-index: 2;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tleft: 0;\n\t\tright: 0;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\tbackground: rgba(200, 200, 255, 0.4);\n\t\tpointer-events: none;\n\t}\n\n\t.milkdown-table-block {\n\t\tdisplay: block;\n\t\tmargin: 4px 0;\n\t}\n\n\t.milkdown .milkdown-table-block table {\n\t\tmargin: 0 !important;\n\t}\n\n\t.milkdown .milkdown-table-block th,\n\t.milkdown .milkdown-table-block td {\n\t\tborder: 1px solid color-mix(in srgb, var(--og-border-color-3), transparent 80%);\n\t\tpadding: 2px 10px;\n\t}\n\n\t.milkdown .milkdown-table-block th .ProseMirror-selectednode,\n\t.milkdown .milkdown-table-block td .ProseMirror-selectednode {\n\t\tbackground-color: transparent !important;\n\t}\n\n\t.milkdown .milkdown-table-block th:has(.ProseMirror-selectednode),\n\t.milkdown .milkdown-table-block td:has(.ProseMirror-selectednode) {\n\t\toutline: 1px solid var(--markdown-color-primary);\n\t\toutline-offset: -1px;\n\t}\n\n\t.milkdown .milkdown-table-block .selectedCell::after {\n\t\tbackground-color: var(--markdown-color-selected);\n\t\topacity: 0.4;\n\t}\n\n\t.milkdown .milkdown-table-block .selectedCell ::selection {\n\t\tbackground: transparent;\n\t}\n\n\t/* drag preview */\n\n\t.milkdown .milkdown-table-block .drag-preview {\n\t\tbackground-color: var(--markdown-color-surface);\n\t\topacity: 0.4;\n\t\tposition: absolute;\n\t\tz-index: 100;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\toutline: 1px solid var(--markdown-color-primary);\n\t\toutline-offset: -1px;\n\t}\n\n\t.milkdown .milkdown-table-block .drag-preview[data-show='false'] {\n\t\tdisplay: none;\n\t}\n\n\t.milkdown .milkdown-table-block .drag-preview th:has(.ProseMirror-selectednode),\n\t.milkdown .milkdown-table-block .drag-preview td:has(.ProseMirror-selectednode) {\n\t\toutline: none;\n\t}\n\n\t/* handle */\n\n\t.milkdown .milkdown-table-block .handle {\n\t\tposition: absolute;\n\t\tfont-size: 14px;\n\t\ttransition: opacity ease-in-out 0.2s;\n\t}\n\n\t.milkdown .milkdown-table-block .handle[data-show='false'] {\n\t\topacity: 0;\n\t}\n\n\t.milkdown .milkdown-table-block svg {\n\t\tfill: var(--markdown-color-outline);\n\t}\n\n\t/* cell handle */\n\n\t.milkdown .milkdown-table-block .cell-handle {\n\t\tz-index: 50;\n\t\tleft: -999px;\n\t\ttop: -999px;\n\t\tcursor: grab;\n\t\tbackground-color: var(--og-accent-color);\n\t\tcolor: var(--og-text-color-2);\n\t\tborder-radius: 100px;\n\t\tbox-shadow: var(--markdown-shadow-1);\n\t\ttransition: background-color 0.2s ease-in-out;\n\t}\n\n\t.milkdown .milkdown-table-block .cell-handle:hover {\n\t\tbackground-color: var(--og-accent-color-highlight);\n\t\topacity: 1;\n\t}\n\n\t.milkdown .milkdown-table-block .cell-handle:has(.button-group:hover) {\n\t\tbackground-color: var(--og-accent-color-highlight);\n\t}\n\n\t.milkdown .milkdown-table-block .cell-handle[data-role='col-drag-handle'] {\n\t\ttransform: translateY(50%);\n\t\tpadding: 0 6px;\n\t\twidth: 28px;\n\t\theight: 16px;\n\t}\n\n\t.milkdown .milkdown-table-block .cell-handle[data-role='row-drag-handle'] {\n\t\ttransform: translateX(50%);\n\t\tpadding: 6px 0;\n\t\twidth: 16px;\n\t\theight: 28px;\n\t}\n\n\t/* button group */\n\n\t.milkdown .milkdown-table-block .cell-handle .button-group {\n\t\tposition: absolute;\n\t\ttransform: translateX(-50%);\n\t\tleft: 50%;\n\t\ttop: -10px;\n\t\tdisplay: flex;\n\t\tbackground-color: var(--og-background-color);\n\t\tborder: 1px solid var(--og-accent-color);\n\t\tborder-radius: var(--og-base-radius);\n\t\tbox-shadow: var(--markdown-shadow-1);\n\t}\n\n\t.milkdown .milkdown-table-block .cell-handle .button-group::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tbottom: -8px;\n\t\theight: 8px;\n\t\tbackground-color: transparent;\n\t\twidth: 100%;\n\t}\n\n\t.milkdown .milkdown-table-block .cell-handle .button-group[data-show='false'] {\n\t\tdisplay: none;\n\t}\n\n\t.milkdown .milkdown-table-block .cell-handle .button-group button {\n\t\tbackground-color: var(--og-accent-color);\n\t\tcolor: var(--og-text-color-2);\n\t\tcursor: pointer;\n\t\tmargin: 6px;\n\t\tpadding: 4px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tborder-radius: 4px;\n\t}\n\n\t.milkdown .milkdown-table-block .cell-handle .button-group button svg {\n\t\twidth: 24px;\n\t\theight: 24px;\n\t}\n\n\t.milkdown .milkdown-table-block .cell-handle .button-group button:hover {\n\t\tborder-radius: var(--og-base-radius);\n\t\tbackground-color: var(--og-accent-color-highlight);\n\t}\n\n\t.milkdown .milkdown-table-block .cell-handle .button-group button:active {\n\t\tbackground: var(--markdown-color-selected);\n\t}\n\n\t/* line handle */\n\n\t.milkdown .milkdown-table-block .line-handle {\n\t\tz-index: 20;\n\t\tbackground-color: var(--markdown-color-primary);\n\t}\n\n\t.milkdown .milkdown-table-block .line-handle:hover {\n\t\topacity: 1;\n\t}\n\n\t.milkdown .milkdown-table-block .line-handle .add-button {\n\t\tcursor: pointer;\n\t\tbackground-color: var(--og-accent-color);\n\t\tcolor: var(--og-text-color-2);\n\t\tborder-radius: 100px;\n\t\tbox-shadow: var(--markdown-shadow-1);\n\t\ttransition: background-color 0.2s ease-in-out;\n\t}\n\n\t.milkdown .milkdown-table-block .line-handle .add-button svg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t}\n\n\t.milkdown .milkdown-table-block .line-handle .add-button:hover {\n\t\tbackground-color: var(--og-accent-color-highlight);\n\t}\n\n\t.milkdown .milkdown-table-block .line-handle .add-button:active {\n\t\tbackground: var(--markdown-color-selected);\n\t}\n\n\t.milkdown .milkdown-table-block .line-handle[data-role='x-line-drag-handle'] {\n\t\theight: 1px;\n\t\tz-index: 2;\n\t}\n\n\t.milkdown .milkdown-table-block .line-handle[data-role='x-line-drag-handle'] .add-button {\n\t\tposition: absolute;\n\t\ttransform: translateX(-50%) translateY(-50%);\n\t\tpadding: 6px 0;\n\t\twidth: 16px;\n\t\theight: 28px;\n\t}\n\n\t.milkdown .milkdown-table-block .line-handle[data-role='y-line-drag-handle'] {\n\t\twidth: 1px;\n\t\tz-index: 1;\n\t}\n\n\t.milkdown .milkdown-table-block .line-handle[data-role='y-line-drag-handle'] .add-button {\n\t\tposition: absolute;\n\t\ttransform: translateY(-50%) translateX(-50%);\n\t\tpadding: 0 6px;\n\t\twidth: 28px;\n\t\theight: 16px;\n\t}\n\n\t.milkdown .milkdown-table-block .line-handle[data-display-type='indicator'] .add-button {\n\t\tdisplay: none;\n\t}\n\n\t/* readonly */\n\n\t.milkdown .milkdown-table-block.readonly .handle {\n\t\tdisplay: none;\n\t}\n`;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omegagrid/markdown",
-  "version": "0.9.54",
+  "version": "0.9.55",
   "license": "UNLICENSED",
   "description": "Markdown view webcomponent",
   "main": "./dist/index.js",
@@ -28,11 +28,11 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.0.1",
-    "@omegagrid/code": "^0.9.54",
-    "@omegagrid/core": "^0.9.54",
-    "@omegagrid/localize": "^0.9.54",
-    "@omegagrid/milkdown-kit": "^0.9.54",
-    "@omegagrid/tabs": "^0.9.54",
+    "@omegagrid/code": "^0.9.55",
+    "@omegagrid/core": "^0.9.55",
+    "@omegagrid/localize": "^0.9.55",
+    "@omegagrid/milkdown-kit": "^0.9.55",
+    "@omegagrid/tabs": "^0.9.55",
     "lit": "^3.1.1",
     "markdown-it": "^14.1.0",
     "ts-debounce": "^4.0.0"