@aswin.dev/editor 0.7.2 → 0.7.3
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/{AccessibilityPanel-EmQ19wiS.js → AccessibilityPanel-COL6Wm7p.js} +1 -1
- package/dist/{AiChatSidebar-DeB0w_32.js → AiChatSidebar-Dt5pvG5t.js} +9 -9
- package/dist/{AiFeatureMenu-DoLD5Cde.js → AiFeatureMenu-BipxcGap.js} +5 -5
- package/dist/{BlockA11yBadge-DkNbDvJA.js → BlockA11yBadge-Qs6HtXid.js} +1 -1
- package/dist/{CloudEditor-zo9PjjvY.js → CloudEditor-CnUX0IOW.js} +327 -290
- package/dist/{CollaboratorBar-BsXMY-8e.js → CollaboratorBar-NaaZTjbs.js} +2 -2
- package/dist/{CommentsSidebar-DIWIa4rS.js → CommentsSidebar-DE6ZsM4D.js} +15 -16
- package/dist/CountdownBlock-Ba3T-i2X.js +1536 -0
- package/dist/{CountdownToolbar-BuS8p5ju.js → CountdownToolbar-CbhSp_uq.js} +2 -2
- package/dist/{DesignReferenceSidebar-RDlnhL-6.js → DesignReferenceSidebar-CZg97bbj.js} +5 -5
- package/dist/{LoadingTrack-BJ59h9ok.js → LoadingTrack-Ba2pfF57.js} +1 -1
- package/dist/{ModuleBrowserModal-b7HbpByz.js → ModuleBrowserModal-D2EVdexc.js} +7 -7
- package/dist/{ModulePreviewCanvas-D__YlOLS.js → ModulePreviewCanvas-P3N-nxkU.js} +52 -47
- package/dist/{NumberWithSuffix-Ca3vNY84.js → NumberWithSuffix-CihczoAd.js} +2 -2
- package/dist/{ParagraphEditor-B1aYPO-6.js → ParagraphEditor-BbRuKhWv.js} +23 -23
- package/dist/{RichTextEditorContent-BmEVMrkJ.js → RichTextEditorContent-CrqPQdnk.js} +1 -1
- package/dist/{SaveModuleDialog-ClovqI6h.js → SaveModuleDialog-DLZa3m3O.js} +3 -3
- package/dist/{SnapshotHistory-DoqtH0cw.js → SnapshotHistory-Csg1_jXi.js} +5 -5
- package/dist/{TemplateScoringPanel-DQv2ZAiL.js → TemplateScoringPanel-CS7o62zS.js} +7 -7
- package/dist/{TestEmailModal-iIeYJYsj.js → TestEmailModal-m3okLbJz.js} +3 -3
- package/dist/{TitleEditor-CTDIwRF_.js → TitleEditor-CtJIS5ER.js} +7 -7
- package/dist/{TplModal-CBq1J1pG.js → TplModal-CQCrKeKP.js} +1 -1
- package/dist/{blockTypeIcons-QkC6f5UE.js → blockTypeIcons-Dah0pgt-.js} +50 -19
- package/dist/bundle-stats.json +7 -7
- package/dist/cdn/chunks/{AccessibilityPanel-BeU8nz7A.js → AccessibilityPanel-Bt_fD7QT.js} +8 -8
- package/dist/cdn/chunks/{AccessibilityPanel-BeU8nz7A.js.map → AccessibilityPanel-Bt_fD7QT.js.map} +1 -1
- package/dist/cdn/chunks/{AiFeatureMenu-B2mhscyP.js → AiFeatureMenu-Bn-0rgfr.js} +8 -8
- package/dist/cdn/chunks/{AiFeatureMenu-B2mhscyP.js.map → AiFeatureMenu-Bn-0rgfr.js.map} +1 -1
- package/dist/cdn/chunks/{BlockA11yBadge-C4g77gF0.js → BlockA11yBadge-Cj18Iw0p.js} +4 -4
- package/dist/cdn/chunks/{BlockA11yBadge-C4g77gF0.js.map → BlockA11yBadge-Cj18Iw0p.js.map} +1 -1
- package/dist/cdn/chunks/{CloudEditor-Btyr0b0_.js → CloudEditor-56lVcdot.js} +312 -275
- package/dist/cdn/chunks/CloudEditor-56lVcdot.js.map +1 -0
- package/dist/cdn/chunks/{CollaboratorBar-YBiIjiRh.js → CollaboratorBar-B7DCV3xp.js} +3 -3
- package/dist/cdn/chunks/{CollaboratorBar-YBiIjiRh.js.map → CollaboratorBar-B7DCV3xp.js.map} +1 -1
- package/dist/cdn/chunks/{CountdownToolbar-C9XZr33O.js → CountdownToolbar-BtaD3d3-.js} +4 -4
- package/dist/cdn/chunks/{CountdownToolbar-C9XZr33O.js.map → CountdownToolbar-BtaD3d3-.js.map} +1 -1
- package/dist/cdn/chunks/{ModuleBrowserModal-C2CDWKW6.js → ModuleBrowserModal-CiIY7ZGv.js} +7 -7
- package/dist/cdn/chunks/{ModuleBrowserModal-C2CDWKW6.js.map → ModuleBrowserModal-CiIY7ZGv.js.map} +1 -1
- package/dist/cdn/chunks/{ModulePreviewCanvas-Drt8Evai.js → ModulePreviewCanvas-M7_OGV2m.js} +55 -51
- package/dist/cdn/chunks/ModulePreviewCanvas-M7_OGV2m.js.map +1 -0
- package/dist/cdn/chunks/{NumberWithSuffix-Ty1bp9vB.js → NumberWithSuffix-DfVBnsgc.js} +3 -3
- package/dist/cdn/chunks/{NumberWithSuffix-Ty1bp9vB.js.map → NumberWithSuffix-DfVBnsgc.js.map} +1 -1
- package/dist/cdn/chunks/{ParagraphEditor-BA1WbHI7.js → ParagraphEditor-1XJOpiLX.js} +45 -45
- package/dist/cdn/chunks/{ParagraphEditor-BA1WbHI7.js.map → ParagraphEditor-1XJOpiLX.js.map} +1 -1
- package/dist/cdn/chunks/{RichTextEditorContent-BtWCA_Oc.js → RichTextEditorContent-C2q8sbp2.js} +4 -4
- package/dist/cdn/chunks/{RichTextEditorContent-BtWCA_Oc.js.map → RichTextEditorContent-C2q8sbp2.js.map} +1 -1
- package/dist/cdn/chunks/{SaveModuleDialog-AwL0tkCV.js → SaveModuleDialog-BNxh1jPT.js} +4 -4
- package/dist/cdn/chunks/{SaveModuleDialog-AwL0tkCV.js.map → SaveModuleDialog-BNxh1jPT.js.map} +1 -1
- package/dist/cdn/chunks/{TitleEditor-DbSyeixS.js → TitleEditor-IF7VzLTk.js} +13 -13
- package/dist/cdn/chunks/{TitleEditor-DbSyeixS.js.map → TitleEditor-IF7VzLTk.js.map} +1 -1
- package/dist/cdn/chunks/blockTypeIcons-tPBKQ8WC.js +24 -0
- package/dist/cdn/chunks/blockTypeIcons-tPBKQ8WC.js.map +1 -0
- package/dist/{de-2LEvILeZ.js → cdn/chunks/de-B05yW8Gi.js} +74 -3
- package/dist/cdn/chunks/de-B05yW8Gi.js.map +1 -0
- package/dist/cdn/chunks/{de-RQrZR56a.js → de-BPHtelu7.js} +1 -1
- package/dist/cdn/chunks/{de-RQrZR56a.js.map → de-BPHtelu7.js.map} +1 -1
- package/dist/cdn/chunks/{de-Ce-LbJ2J.js → de-BRDqJwJe.js} +1 -1
- package/dist/cdn/chunks/{de-Ce-LbJ2J.js.map → de-BRDqJwJe.js.map} +1 -1
- package/dist/cdn/chunks/{emojiData-EMFlj6FJ.js → emojiData-DUHzsh4j.js} +1 -1
- package/dist/cdn/chunks/{emojiData-EMFlj6FJ.js.map → emojiData-DUHzsh4j.js.map} +1 -1
- package/dist/cdn/chunks/{en-CNqLoIm9.js → en-BII7695P.js} +73 -4
- package/dist/cdn/chunks/en-BII7695P.js.map +1 -0
- package/dist/cdn/chunks/{en-DiCWK5fG.js → en-Cdj_Ikl1.js} +1 -1
- package/dist/cdn/chunks/{en-DiCWK5fG.js.map → en-Cdj_Ikl1.js.map} +1 -1
- package/dist/cdn/chunks/{en-Bl1ecfRF.js → en-DejwuJhw.js} +1 -1
- package/dist/cdn/chunks/{en-Bl1ecfRF.js.map → en-DejwuJhw.js.map} +1 -1
- package/dist/cdn/chunks/{extensions-BVKQw_sp.js → extensions-B0eT-yjf.js} +22 -22
- package/dist/cdn/chunks/{extensions-BVKQw_sp.js.map → extensions-B0eT-yjf.js.map} +1 -1
- package/dist/cdn/chunks/{features-DIBEo4xl.js → features-BrvE2Fzv.js} +2934 -1170
- package/dist/cdn/chunks/features-BrvE2Fzv.js.map +1 -0
- package/dist/cdn/chunks/{icons-C1Gg-ov-.js → icons-C7wtAD8p.js} +111 -60
- package/dist/cdn/chunks/icons-C7wtAD8p.js.map +1 -0
- package/dist/cdn/chunks/{liquid.browser-lQbkge2E.js → liquid.browser-CllF-us3.js} +1 -1
- package/dist/cdn/chunks/{liquid.browser-lQbkge2E.js.map → liquid.browser-CllF-us3.js.map} +1 -1
- package/dist/cdn/chunks/{media-library-BTF_Ko70.js → media-library-Cl5XuaKy.js} +676 -660
- package/dist/cdn/chunks/media-library-Cl5XuaKy.js.map +1 -0
- package/dist/cdn/chunks/{pusher-CDbNlZBE.js → pusher-i7-OBujc.js} +1 -1
- package/dist/cdn/chunks/{pusher-CDbNlZBE.js.map → pusher-i7-OBujc.js.map} +1 -1
- package/dist/cdn/chunks/{quality-C5AmotmP.js → quality-Va91a3N8.js} +40 -40
- package/dist/cdn/chunks/{quality-C5AmotmP.js.map → quality-Va91a3N8.js.map} +1 -1
- package/dist/cdn/chunks/{renderer-D0L44Vlp.js → renderer-si0Zgxeb.js} +17 -17
- package/dist/cdn/chunks/{renderer-D0L44Vlp.js.map → renderer-si0Zgxeb.js.map} +1 -1
- package/dist/cdn/chunks/{src-RKexlYjA.js → src-BLyYIbdZ.js} +10 -10
- package/dist/cdn/chunks/{src-RKexlYjA.js.map → src-BLyYIbdZ.js.map} +1 -1
- package/dist/cdn/chunks/{styleConstants-PgmvNBzQ.js → styleConstants-DfcU8u_r.js} +1 -1
- package/dist/cdn/chunks/{styleConstants-PgmvNBzQ.js.map → styleConstants-DfcU8u_r.js.map} +1 -1
- package/dist/cdn/chunks/{styles-CQR6ed13.js → styles-C6BQLT9F.js} +2174 -1343
- package/dist/cdn/chunks/styles-C6BQLT9F.js.map +1 -0
- package/dist/cdn/chunks/{tiptap-CDzAbF2j.js → tiptap-D8whBv5F.js} +2 -2
- package/dist/cdn/chunks/{tiptap-CDzAbF2j.js.map → tiptap-D8whBv5F.js.map} +1 -1
- package/dist/cdn/editor.css +1 -1
- package/dist/cdn/editor.js +146 -117
- package/dist/cdn/editor.js.map +1 -1
- package/dist/{cloud-DJG4tb4_.js → cloud-BoS0J0vs.js} +1 -1
- package/dist/{cdn/chunks/de-_tooy3Q8.js → de-C74F9xK3.js} +72 -5
- package/dist/{dist-BSJvAvH3.js → dist-BUzw1buG.js} +1 -1
- package/dist/{dist-b-XUqAoF.js → dist-BZyY-SS4.js} +1 -1
- package/dist/{dist-Df4ie7vZ.js → dist-BadNx4qo.js} +1 -1
- package/dist/{dist-wfAedlzi.js → dist-BesOh2mk.js} +1 -1
- package/dist/{dist-kZfaVUpW.js → dist-Bz3M4RXG.js} +3 -3
- package/dist/{dist-Bmir0gYb.js → dist-C2grMquk.js} +233 -139
- package/dist/{dist-BvPgo-UK.js → dist-C3T2AKtB.js} +1 -1
- package/dist/{dist-CPVBKMmd.js → dist-C9ckKEZL.js} +1 -1
- package/dist/{dist-DxOoemkW.js → dist-CBItRG-Z.js} +1 -1
- package/dist/{dist-BeFnymxK.js → dist-COSzWQUs.js} +1 -1
- package/dist/{dist-CivF9P8b.js → dist-Djgi0A6k.js} +92 -77
- package/dist/{dist-BHAeXaUY.js → dist-DtiDUrX-.js} +1 -1
- package/dist/{dist-HEQ52gTJ.js → dist-Dzt5foyL.js} +1 -1
- package/dist/{en-D2RU2Poj.js → en-B24jVTeO.js} +72 -3
- package/dist/{extensions-BQ1xXx3d.js → extensions-DsmjHqBF.js} +21 -21
- package/dist/index.d.ts +8 -8
- package/dist/{pencil-BZJPNYWR.js → pencil-Bpimrzzw.js} +5 -2
- package/dist/style.css +1 -1
- package/dist/{styles-CavWjvol.js → styles-BMFMtR9R.js} +2121 -1267
- package/dist/templatical-editor.js +149 -120
- package/dist/{useEditorCore-BGnzcT7p.js → useEditorCore-CtNAo0uy.js} +2331 -2202
- package/dist/useMergeTag-2vTcVpNo.js +34 -0
- package/package.json +7 -7
- package/dist/CountdownBlock-BCi7-DAM.js +0 -92
- package/dist/cdn/chunks/CloudEditor-Btyr0b0_.js.map +0 -1
- package/dist/cdn/chunks/CountdownBlock-B06UZoWe.js +0 -93
- package/dist/cdn/chunks/CountdownBlock-B06UZoWe.js.map +0 -1
- package/dist/cdn/chunks/ModulePreviewCanvas-Drt8Evai.js.map +0 -1
- package/dist/cdn/chunks/blockTypeIcons-pQIkxJzc.js +0 -23
- package/dist/cdn/chunks/blockTypeIcons-pQIkxJzc.js.map +0 -1
- package/dist/cdn/chunks/de-_tooy3Q8.js.map +0 -1
- package/dist/cdn/chunks/en-CNqLoIm9.js.map +0 -1
- package/dist/cdn/chunks/features-DIBEo4xl.js.map +0 -1
- package/dist/cdn/chunks/icons-C1Gg-ov-.js.map +0 -1
- package/dist/cdn/chunks/media-library-BTF_Ko70.js.map +0 -1
- package/dist/cdn/chunks/styles-CQR6ed13.js.map +0 -1
- package/dist/check-DJrpDKO_.js +0 -7
- package/dist/useMergeTag-CfuZq2fF.js +0 -34
- /package/dist/{_plugin-vue_export-helper-Bwh4ceeO.js → _plugin-vue_export-helper-BVAJ4lgT.js} +0 -0
- /package/dist/{clock-ik2pRJKG.js → clock-Ba4p3rJM.js} +0 -0
- /package/dist/{de-D2npYjrZ.js → de-GOtR9DwW.js} +0 -0
- /package/dist/{dist-DvHLtWVP.js → dist-DXa1uAMh.js} +0 -0
- /package/dist/{emojiData-DvQBBzmO.js → emojiData-DrBuvEoP.js} +0 -0
- /package/dist/{en-ib-4h3_o.js → en-dFFQVzNn.js} +0 -0
- /package/dist/{formatRelativeTime-CFDZnEIs.js → formatRelativeTime-BhhO8yCl.js} +0 -0
- /package/dist/{liquid.browser-7Rv0QDiO.js → liquid.browser-BvCyLQII.js} +0 -0
- /package/dist/{scan-line-DlghmhNf.js → scan-line-CzfFJO1o.js} +0 -0
- /package/dist/{send-DDdhIRj8.js → send-D2eSo4GH.js} +0 -0
- /package/dist/{shield-check-OSQ-JVTX.js → shield-check-jkpgcC0-.js} +0 -0
- /package/dist/{sparkles-BN4a-CoF.js → sparkles-Chm5CZfb.js} +0 -0
- /package/dist/{styleConstants-wWRbcuEK.js → styleConstants-34eUKPOZ.js} +0 -0
- /package/dist/{text-align-start-D1weisjS.js → text-align-start-CzBnJsW8.js} +0 -0
- /package/dist/{trash-2-CMWvQ5KX.js → trash-2-CtK2apEH.js} +0 -0
- /package/dist/{triangle-alert-DyidRNX_.js → triangle-alert-KpDVNbpn.js} +0 -0
- /package/dist/{undo-2-Cg8I7obC.js → undo-2-m1EUDbUg.js} +0 -0
- /package/dist/{useCloudI18n-BTTNBk5i.js → useCloudI18n-DOKSZql1.js} +0 -0
- /package/dist/{x-CgIhNcT9.js → x-BkaOMosX.js} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ParagraphEditor-BA1WbHI7.js","names":[],"sources":["../../../src/components/blocks/EmojiPickerDropdown.vue","../../../src/components/blocks/EmojiPickerDropdown.vue","../../../src/components/toolbar/ToolbarIconButton.vue","../../../src/components/toolbar/ToolbarIconButton.vue","../../../src/components/toolbar/ToolbarSeparator.vue","../../../src/components/toolbar/ToolbarSelect.vue","../../../src/components/toolbar/ToolbarSelect.vue","../../../src/components/blocks/ParagraphToolbar.vue","../../../src/components/blocks/ParagraphToolbar.vue","../../../src/components/blocks/ParagraphEditor.vue","../../../src/components/blocks/ParagraphEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useEmoji, useI18n } from \"../../composables\";\nimport { useFocusTrap } from \"../../composables/useFocusTrap\";\nimport { onClickOutside } from \"@vueuse/core\";\nimport { Smile } from \"@lucide/vue\";\nimport { computed, ref } from \"vue\";\n\nconst emit = defineEmits<{\n (e: \"insert\", emoji: string): void;\n}>();\n\nconst {\n categories: emojiCategories,\n isOpen: showEmojiPicker,\n toggle: toggleEmojiPicker,\n close: closeEmojiPicker,\n} = useEmoji();\n\nconst { t, format } = useI18n();\n\nconst pickerRef = ref<HTMLElement | null>(null);\nconst rootRef = ref<HTMLElement | null>(null);\n\nconst isOpenRef = computed(() => showEmojiPicker.value);\nuseFocusTrap(pickerRef, isOpenRef);\n\nonClickOutside(rootRef, () => {\n if (showEmojiPicker.value) {\n closeEmojiPicker();\n }\n});\n\nfunction handleInsert(emoji: string): void {\n emit(\"insert\", emoji);\n closeEmojiPicker();\n}\n</script>\n\n<template>\n <div ref=\"rootRef\" class=\"tpl:relative\">\n <button\n type=\"button\"\n class=\"tpl-text-toolbar-btn\"\n :class=\"{\n 'tpl-text-toolbar-btn--active': showEmojiPicker,\n }\"\n :aria-label=\"t.paragraphEditor.insertEmoji\"\n :title=\"t.paragraphEditor.insertEmoji\"\n :aria-expanded=\"showEmojiPicker\"\n aria-haspopup=\"dialog\"\n aria-controls=\"tpl-emoji-picker\"\n @click=\"toggleEmojiPicker\"\n >\n <Smile :size=\"16\" :stroke-width=\"2\" />\n </button>\n <div\n v-if=\"showEmojiPicker\"\n id=\"tpl-emoji-picker\"\n ref=\"pickerRef\"\n role=\"dialog\"\n aria-modal=\"false\"\n :aria-label=\"t.paragraphEditor.insertEmoji\"\n tabindex=\"-1\"\n class=\"tpl-emoji-picker tpl:absolute tpl:top-full tpl:left-0 tpl:z-10 tpl:mt-2 tpl:w-72 tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-2 tpl:shadow-lg\"\n @keydown.esc.stop.prevent=\"closeEmojiPicker\"\n >\n <div\n v-for=\"category in emojiCategories\"\n :key=\"category.key\"\n class=\"tpl:mb-2 tpl:last:mb-0\"\n >\n <div\n class=\"tpl:mb-1.5 tpl:text-[10px] tpl:font-medium tpl:tracking-wide tpl:text-[var(--tpl-text-muted)] tpl:uppercase\"\n >\n {{ t.emoji[category.key] }}\n </div>\n <div class=\"tpl:grid tpl:grid-cols-10 tpl:gap-0.5\">\n <button\n v-for=\"emoji in category.emojis\"\n :key=\"emoji\"\n type=\"button\"\n :aria-label=\"format(t.paragraphEditor.emojiItemLabel, { emoji })\"\n class=\"tpl:flex tpl:size-6 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:border-none tpl:bg-transparent tpl:text-base tpl:transition-all tpl:duration-100 tpl:hover:scale-125 tpl:hover:bg-[var(--tpl-bg-active)]\"\n @click=\"handleInsert(emoji)\"\n >\n {{ emoji }}\n </button>\n </div>\n </div>\n </div>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useEmoji, useI18n } from \"../../composables\";\nimport { useFocusTrap } from \"../../composables/useFocusTrap\";\nimport { onClickOutside } from \"@vueuse/core\";\nimport { Smile } from \"@lucide/vue\";\nimport { computed, ref } from \"vue\";\n\nconst emit = defineEmits<{\n (e: \"insert\", emoji: string): void;\n}>();\n\nconst {\n categories: emojiCategories,\n isOpen: showEmojiPicker,\n toggle: toggleEmojiPicker,\n close: closeEmojiPicker,\n} = useEmoji();\n\nconst { t, format } = useI18n();\n\nconst pickerRef = ref<HTMLElement | null>(null);\nconst rootRef = ref<HTMLElement | null>(null);\n\nconst isOpenRef = computed(() => showEmojiPicker.value);\nuseFocusTrap(pickerRef, isOpenRef);\n\nonClickOutside(rootRef, () => {\n if (showEmojiPicker.value) {\n closeEmojiPicker();\n }\n});\n\nfunction handleInsert(emoji: string): void {\n emit(\"insert\", emoji);\n closeEmojiPicker();\n}\n</script>\n\n<template>\n <div ref=\"rootRef\" class=\"tpl:relative\">\n <button\n type=\"button\"\n class=\"tpl-text-toolbar-btn\"\n :class=\"{\n 'tpl-text-toolbar-btn--active': showEmojiPicker,\n }\"\n :aria-label=\"t.paragraphEditor.insertEmoji\"\n :title=\"t.paragraphEditor.insertEmoji\"\n :aria-expanded=\"showEmojiPicker\"\n aria-haspopup=\"dialog\"\n aria-controls=\"tpl-emoji-picker\"\n @click=\"toggleEmojiPicker\"\n >\n <Smile :size=\"16\" :stroke-width=\"2\" />\n </button>\n <div\n v-if=\"showEmojiPicker\"\n id=\"tpl-emoji-picker\"\n ref=\"pickerRef\"\n role=\"dialog\"\n aria-modal=\"false\"\n :aria-label=\"t.paragraphEditor.insertEmoji\"\n tabindex=\"-1\"\n class=\"tpl-emoji-picker tpl:absolute tpl:top-full tpl:left-0 tpl:z-10 tpl:mt-2 tpl:w-72 tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-2 tpl:shadow-lg\"\n @keydown.esc.stop.prevent=\"closeEmojiPicker\"\n >\n <div\n v-for=\"category in emojiCategories\"\n :key=\"category.key\"\n class=\"tpl:mb-2 tpl:last:mb-0\"\n >\n <div\n class=\"tpl:mb-1.5 tpl:text-[10px] tpl:font-medium tpl:tracking-wide tpl:text-[var(--tpl-text-muted)] tpl:uppercase\"\n >\n {{ t.emoji[category.key] }}\n </div>\n <div class=\"tpl:grid tpl:grid-cols-10 tpl:gap-0.5\">\n <button\n v-for=\"emoji in category.emojis\"\n :key=\"emoji\"\n type=\"button\"\n :aria-label=\"format(t.paragraphEditor.emojiItemLabel, { emoji })\"\n class=\"tpl:flex tpl:size-6 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:border-none tpl:bg-transparent tpl:text-base tpl:transition-all tpl:duration-100 tpl:hover:scale-125 tpl:hover:bg-[var(--tpl-bg-active)]\"\n @click=\"handleInsert(emoji)\"\n >\n {{ emoji }}\n </button>\n </div>\n </div>\n </div>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { Component } from \"vue\";\n\ndefineProps<{\n icon: Component;\n label: string;\n active?: boolean;\n strokeWidth?: number;\n size?: number;\n}>();\n</script>\n\n<template>\n <button\n type=\"button\"\n class=\"tpl-text-toolbar-btn\"\n :class=\"{ 'tpl-text-toolbar-btn--active': active }\"\n :aria-label=\"label\"\n :title=\"label\"\n :aria-pressed=\"active ? 'true' : 'false'\"\n >\n <component :is=\"icon\" :size=\"size ?? 16\" :stroke-width=\"strokeWidth ?? 2\" />\n </button>\n</template>\n","<script setup lang=\"ts\">\nimport type { Component } from \"vue\";\n\ndefineProps<{\n icon: Component;\n label: string;\n active?: boolean;\n strokeWidth?: number;\n size?: number;\n}>();\n</script>\n\n<template>\n <button\n type=\"button\"\n class=\"tpl-text-toolbar-btn\"\n :class=\"{ 'tpl-text-toolbar-btn--active': active }\"\n :aria-label=\"label\"\n :title=\"label\"\n :aria-pressed=\"active ? 'true' : 'false'\"\n >\n <component :is=\"icon\" :size=\"size ?? 16\" :stroke-width=\"strokeWidth ?? 2\" />\n </button>\n</template>\n","<template>\n <span\n class=\"tpl:mx-1 tpl:h-6 tpl:w-px tpl:bg-[var(--tpl-border)]\"\n aria-hidden=\"true\"\n ></span>\n</template>\n","<script setup lang=\"ts\">\ninterface OptionItem {\n value: string;\n label: string;\n}\n\ndefineProps<{\n modelValue: string;\n options: readonly (string | OptionItem)[];\n label: string;\n placeholder?: string;\n widthClass?: string;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: string): void;\n}>();\n\nfunction onChange(e: Event): void {\n emit(\"update:modelValue\", (e.target as HTMLSelectElement).value);\n}\n\nfunction optionValue(opt: string | OptionItem): string {\n return typeof opt === \"string\" ? opt : opt.value;\n}\n\nfunction optionLabel(opt: string | OptionItem): string {\n return typeof opt === \"string\" ? opt : opt.label;\n}\n</script>\n\n<template>\n <select\n :class=\"[\n 'tpl:h-8 tpl:cursor-pointer tpl:rounded tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-2 tpl:text-xs tpl:text-[var(--tpl-text)] tpl:outline-none',\n widthClass ?? 'tpl:w-20',\n ]\"\n :value=\"modelValue\"\n :aria-label=\"label\"\n :title=\"label\"\n @change=\"onChange\"\n >\n <option value=\"\">{{ placeholder ?? \"\" }}</option>\n <option\n v-for=\"opt in options\"\n :key=\"optionValue(opt)\"\n :value=\"optionValue(opt)\"\n >\n {{ optionLabel(opt) }}\n </option>\n </select>\n</template>\n","<script setup lang=\"ts\">\ninterface OptionItem {\n value: string;\n label: string;\n}\n\ndefineProps<{\n modelValue: string;\n options: readonly (string | OptionItem)[];\n label: string;\n placeholder?: string;\n widthClass?: string;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: string): void;\n}>();\n\nfunction onChange(e: Event): void {\n emit(\"update:modelValue\", (e.target as HTMLSelectElement).value);\n}\n\nfunction optionValue(opt: string | OptionItem): string {\n return typeof opt === \"string\" ? opt : opt.value;\n}\n\nfunction optionLabel(opt: string | OptionItem): string {\n return typeof opt === \"string\" ? opt : opt.label;\n}\n</script>\n\n<template>\n <select\n :class=\"[\n 'tpl:h-8 tpl:cursor-pointer tpl:rounded tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-2 tpl:text-xs tpl:text-[var(--tpl-text)] tpl:outline-none',\n widthClass ?? 'tpl:w-20',\n ]\"\n :value=\"modelValue\"\n :aria-label=\"label\"\n :title=\"label\"\n @change=\"onChange\"\n >\n <option value=\"\">{{ placeholder ?? \"\" }}</option>\n <option\n v-for=\"opt in options\"\n :key=\"optionValue(opt)\"\n :value=\"optionValue(opt)\"\n >\n {{ optionLabel(opt) }}\n </option>\n </select>\n</template>\n","<script setup lang=\"ts\">\nimport EmojiPickerDropdown from \"./EmojiPickerDropdown.vue\";\nimport ToolbarIconButton from \"../toolbar/ToolbarIconButton.vue\";\nimport ToolbarSeparator from \"../toolbar/ToolbarSeparator.vue\";\nimport ToolbarSelect from \"../toolbar/ToolbarSelect.vue\";\nimport { useI18n } from \"../../composables\";\nimport type { Editor } from \"@tiptap/core\";\nimport {\n AlignCenter,\n AlignLeft,\n AlignRight,\n Bold,\n Italic,\n Link,\n List,\n ListOrdered,\n LoaderCircle,\n RemoveFormatting,\n ScanLine,\n Strikethrough,\n Subscript,\n Superscript,\n Underline,\n} from \"@lucide/vue\";\nimport { inject } from \"vue\";\nimport {\n THEME_STYLES_KEY,\n UI_THEME_KEY,\n FONTS_MANAGER_KEY,\n requireInject,\n} from \"../../keys\";\nimport {\n DEFAULT_TEXT_COLOR,\n DEFAULT_HIGHLIGHT_COLOR,\n FONT_SIZE_OPTIONS,\n LINE_HEIGHT_OPTIONS,\n LETTER_SPACING_OPTIONS,\n} from \"../../constants/styleConstants\";\n\nconst props = defineProps<{\n editor: Editor | null;\n toolbarPosition: { top: number; left: number };\n isLoading: boolean;\n canRequestMergeTag: boolean;\n}>();\n\nconst emit = defineEmits<{\n (e: \"open-link-dialog\"): void;\n (e: \"add-merge-tag\"): void;\n}>();\n\nconst themeStyles = inject(THEME_STYLES_KEY, null);\nconst tplUiTheme = inject(UI_THEME_KEY, null);\nconst fontsManager = requireInject(FONTS_MANAGER_KEY, \"ParagraphToolbar\");\n\nconst { t } = useI18n();\n\nconst fontFamilies = fontsManager.fonts;\n\nfunction insertEmoji(emoji: string): void {\n props.editor?.chain().focus().insertContent(emoji).run();\n}\n\nfunction textStyleAttr(attr: string): string {\n return (props.editor?.getAttributes(\"textStyle\")[attr] as string) || \"\";\n}\n\nfunction setFontFamily(family: string): void {\n const chain = props.editor?.chain().focus();\n if (family) chain?.setFontFamily(family).run();\n else chain?.unsetFontFamily().run();\n}\n\nfunction setFontSize(size: string): void {\n const chain = props.editor?.chain().focus();\n if (size) chain?.setFontSize(size).run();\n else chain?.unsetFontSize().run();\n}\n\nfunction setColor(color: string): void {\n const chain = props.editor?.chain().focus();\n if (color) chain?.setColor(color).run();\n else chain?.unsetColor().run();\n}\n\nfunction getCurrentLineHeight(): string {\n return (props.editor?.getAttributes(\"paragraph\").lineHeight as string) || \"\";\n}\n\nfunction setLineHeight(value: string): void {\n const chain = props.editor?.chain().focus();\n if (value) chain?.setLineHeight(value).run();\n else chain?.unsetLineHeight().run();\n}\n\nfunction setLetterSpacing(value: string): void {\n const chain = props.editor?.chain().focus();\n if (value && value !== \"normal\") chain?.setLetterSpacing(value).run();\n else chain?.unsetLetterSpacing().run();\n}\n\nfunction getCurrentHighlight(): string {\n return (props.editor?.getAttributes(\"highlight\").color as string) || \"\";\n}\n\nfunction setHighlight(color: string): void {\n const chain = props.editor?.chain().focus();\n if (color) chain?.setHighlight({ color }).run();\n else chain?.unsetHighlight().run();\n}\n</script>\n\n<template>\n <Teleport to=\"body\">\n <div\n :data-tpl-theme=\"tplUiTheme\"\n role=\"toolbar\"\n :aria-label=\"t.paragraphEditor.toolbar\"\n class=\"tpl tpl-text-toolbar tpl:fixed tpl:z-popover tpl:flex tpl:gap-1 tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2 tpl:shadow-lg\"\n :style=\"{\n ...themeStyles,\n top: `${toolbarPosition.top}px`,\n left: `${toolbarPosition.left}px`,\n transform: 'translateY(-100%)',\n flexDirection: 'column',\n }\"\n >\n <template v-if=\"!isLoading && editor\">\n <!-- Row 1: Font family, Font size, Text color, Bold/Italic/Underline/Strikethrough -->\n <div class=\"tpl:flex tpl:items-center tpl:gap-1\">\n <ToolbarSelect\n :model-value=\"textStyleAttr('fontFamily')\"\n :options=\"fontFamilies\"\n :label=\"t.paragraphEditor.fontFamily\"\n :placeholder=\"t.paragraphEditor.defaultFont\"\n width-class=\"tpl:w-32\"\n @update:model-value=\"setFontFamily\"\n />\n <ToolbarSelect\n :model-value=\"textStyleAttr('fontSize')\"\n :options=\"FONT_SIZE_OPTIONS\"\n :label=\"t.paragraphEditor.fontSize\"\n :placeholder=\"t.paragraphEditor.defaultSize\"\n width-class=\"tpl:w-20\"\n @update:model-value=\"setFontSize\"\n />\n <ToolbarSeparator />\n <div class=\"tpl:relative\">\n <input\n type=\"color\"\n class=\"tpl:size-8 tpl:cursor-pointer tpl:rounded tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-1\"\n :value=\"textStyleAttr('color') || DEFAULT_TEXT_COLOR\"\n :aria-label=\"t.paragraphEditor.textColor\"\n :title=\"t.paragraphEditor.textColor\"\n @input=\"setColor(($event.target as HTMLInputElement).value)\"\n />\n </div>\n <div class=\"tpl:relative\">\n <input\n type=\"color\"\n class=\"tpl:size-8 tpl:cursor-pointer tpl:rounded tpl:border tpl:border-[var(--tpl-border)] tpl:p-1\"\n :style=\"{\n backgroundColor: getCurrentHighlight() || 'var(--tpl-bg)',\n }\"\n :value=\"getCurrentHighlight() || DEFAULT_HIGHLIGHT_COLOR\"\n :aria-label=\"t.paragraphEditor.highlightColor\"\n :title=\"t.paragraphEditor.highlightColor\"\n @input=\"setHighlight(($event.target as HTMLInputElement).value)\"\n />\n </div>\n <ToolbarSeparator />\n <ToolbarIconButton\n :icon=\"Bold\"\n :label=\"t.paragraphEditor.bold\"\n :active=\"editor.isActive('bold')\"\n :stroke-width=\"2.5\"\n @click=\"editor.chain().focus().toggleBold().run()\"\n />\n <ToolbarIconButton\n :icon=\"Italic\"\n :label=\"t.paragraphEditor.italic\"\n :active=\"editor.isActive('italic')\"\n @click=\"editor.chain().focus().toggleItalic().run()\"\n />\n <ToolbarIconButton\n :icon=\"Underline\"\n :label=\"t.paragraphEditor.underline\"\n :active=\"editor.isActive('underline')\"\n @click=\"editor.chain().focus().toggleUnderline().run()\"\n />\n <ToolbarIconButton\n :icon=\"Strikethrough\"\n :label=\"t.paragraphEditor.strikethrough\"\n :active=\"editor.isActive('strike')\"\n @click=\"editor.chain().focus().toggleStrike().run()\"\n />\n <ToolbarSeparator />\n <ToolbarIconButton\n :icon=\"Subscript\"\n :label=\"t.paragraphEditor.subscript\"\n :active=\"editor.isActive('subscript')\"\n @click=\"editor.chain().focus().toggleSubscript().run()\"\n />\n <ToolbarIconButton\n :icon=\"Superscript\"\n :label=\"t.paragraphEditor.superscript\"\n :active=\"editor.isActive('superscript')\"\n @click=\"editor.chain().focus().toggleSuperscript().run()\"\n />\n <ToolbarSeparator />\n <ToolbarIconButton\n :icon=\"Link\"\n :label=\"t.paragraphEditor.addLink\"\n :active=\"editor.isActive('link')\"\n @click=\"emit('open-link-dialog')\"\n />\n </div>\n <!-- Row 2: Lists, Alignment, LH, LS, Clear, Emoji, Merge tags -->\n <div class=\"tpl:flex tpl:items-center tpl:gap-1\">\n <ToolbarIconButton\n :icon=\"List\"\n :label=\"t.paragraphEditor.bulletList\"\n :active=\"editor.isActive('bulletList')\"\n @click=\"editor.chain().focus().toggleBulletList().run()\"\n />\n <ToolbarIconButton\n :icon=\"ListOrdered\"\n :label=\"t.paragraphEditor.numberedList\"\n :active=\"editor.isActive('orderedList')\"\n @click=\"editor.chain().focus().toggleOrderedList().run()\"\n />\n <ToolbarSeparator />\n <ToolbarIconButton\n :icon=\"AlignLeft\"\n :label=\"t.paragraphEditor.alignLeft\"\n :active=\"editor.isActive({ textAlign: 'left' })\"\n @click=\"editor.chain().focus().setTextAlign('left').run()\"\n />\n <ToolbarIconButton\n :icon=\"AlignCenter\"\n :label=\"t.paragraphEditor.alignCenter\"\n :active=\"editor.isActive({ textAlign: 'center' })\"\n @click=\"editor.chain().focus().setTextAlign('center').run()\"\n />\n <ToolbarIconButton\n :icon=\"AlignRight\"\n :label=\"t.paragraphEditor.alignRight\"\n :active=\"editor.isActive({ textAlign: 'right' })\"\n @click=\"editor.chain().focus().setTextAlign('right').run()\"\n />\n <ToolbarSeparator />\n <ToolbarSelect\n :model-value=\"getCurrentLineHeight()\"\n :options=\"LINE_HEIGHT_OPTIONS\"\n :label=\"t.paragraphEditor.lineHeight\"\n placeholder=\"LH\"\n width-class=\"tpl:w-16\"\n @update:model-value=\"setLineHeight\"\n />\n <ToolbarSelect\n :model-value=\"textStyleAttr('letterSpacing')\"\n :options=\"LETTER_SPACING_OPTIONS\"\n :label=\"t.paragraphEditor.letterSpacing\"\n placeholder=\"LS\"\n width-class=\"tpl:w-20\"\n @update:model-value=\"setLetterSpacing\"\n />\n <ToolbarSeparator />\n <ToolbarIconButton\n :icon=\"RemoveFormatting\"\n :label=\"t.paragraphEditor.clearFormatting\"\n @click=\"editor.chain().focus().clearNodes().unsetAllMarks().run()\"\n />\n <ToolbarSeparator />\n <EmojiPickerDropdown @insert=\"insertEmoji\" />\n <template v-if=\"canRequestMergeTag\">\n <ToolbarSeparator />\n <button\n type=\"button\"\n class=\"tpl:flex tpl:h-8 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-bg-active)]\"\n :aria-label=\"t.mergeTag.add\"\n :title=\"t.mergeTag.add\"\n @click=\"emit('add-merge-tag')\"\n >\n <ScanLine :size=\"16\" :stroke-width=\"2\" />\n {{ t.mergeTag.add }}\n </button>\n </template>\n </div>\n </template>\n <template v-else>\n <div\n class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:px-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n >\n <LoaderCircle class=\"tpl-spinner\" :size=\"14\" :stroke-width=\"2\" />\n {{ t.errors.editorLoading }}\n </div>\n </template>\n </div>\n </Teleport>\n</template>\n","<script setup lang=\"ts\">\nimport EmojiPickerDropdown from \"./EmojiPickerDropdown.vue\";\nimport ToolbarIconButton from \"../toolbar/ToolbarIconButton.vue\";\nimport ToolbarSeparator from \"../toolbar/ToolbarSeparator.vue\";\nimport ToolbarSelect from \"../toolbar/ToolbarSelect.vue\";\nimport { useI18n } from \"../../composables\";\nimport type { Editor } from \"@tiptap/core\";\nimport {\n AlignCenter,\n AlignLeft,\n AlignRight,\n Bold,\n Italic,\n Link,\n List,\n ListOrdered,\n LoaderCircle,\n RemoveFormatting,\n ScanLine,\n Strikethrough,\n Subscript,\n Superscript,\n Underline,\n} from \"@lucide/vue\";\nimport { inject } from \"vue\";\nimport {\n THEME_STYLES_KEY,\n UI_THEME_KEY,\n FONTS_MANAGER_KEY,\n requireInject,\n} from \"../../keys\";\nimport {\n DEFAULT_TEXT_COLOR,\n DEFAULT_HIGHLIGHT_COLOR,\n FONT_SIZE_OPTIONS,\n LINE_HEIGHT_OPTIONS,\n LETTER_SPACING_OPTIONS,\n} from \"../../constants/styleConstants\";\n\nconst props = defineProps<{\n editor: Editor | null;\n toolbarPosition: { top: number; left: number };\n isLoading: boolean;\n canRequestMergeTag: boolean;\n}>();\n\nconst emit = defineEmits<{\n (e: \"open-link-dialog\"): void;\n (e: \"add-merge-tag\"): void;\n}>();\n\nconst themeStyles = inject(THEME_STYLES_KEY, null);\nconst tplUiTheme = inject(UI_THEME_KEY, null);\nconst fontsManager = requireInject(FONTS_MANAGER_KEY, \"ParagraphToolbar\");\n\nconst { t } = useI18n();\n\nconst fontFamilies = fontsManager.fonts;\n\nfunction insertEmoji(emoji: string): void {\n props.editor?.chain().focus().insertContent(emoji).run();\n}\n\nfunction textStyleAttr(attr: string): string {\n return (props.editor?.getAttributes(\"textStyle\")[attr] as string) || \"\";\n}\n\nfunction setFontFamily(family: string): void {\n const chain = props.editor?.chain().focus();\n if (family) chain?.setFontFamily(family).run();\n else chain?.unsetFontFamily().run();\n}\n\nfunction setFontSize(size: string): void {\n const chain = props.editor?.chain().focus();\n if (size) chain?.setFontSize(size).run();\n else chain?.unsetFontSize().run();\n}\n\nfunction setColor(color: string): void {\n const chain = props.editor?.chain().focus();\n if (color) chain?.setColor(color).run();\n else chain?.unsetColor().run();\n}\n\nfunction getCurrentLineHeight(): string {\n return (props.editor?.getAttributes(\"paragraph\").lineHeight as string) || \"\";\n}\n\nfunction setLineHeight(value: string): void {\n const chain = props.editor?.chain().focus();\n if (value) chain?.setLineHeight(value).run();\n else chain?.unsetLineHeight().run();\n}\n\nfunction setLetterSpacing(value: string): void {\n const chain = props.editor?.chain().focus();\n if (value && value !== \"normal\") chain?.setLetterSpacing(value).run();\n else chain?.unsetLetterSpacing().run();\n}\n\nfunction getCurrentHighlight(): string {\n return (props.editor?.getAttributes(\"highlight\").color as string) || \"\";\n}\n\nfunction setHighlight(color: string): void {\n const chain = props.editor?.chain().focus();\n if (color) chain?.setHighlight({ color }).run();\n else chain?.unsetHighlight().run();\n}\n</script>\n\n<template>\n <Teleport to=\"body\">\n <div\n :data-tpl-theme=\"tplUiTheme\"\n role=\"toolbar\"\n :aria-label=\"t.paragraphEditor.toolbar\"\n class=\"tpl tpl-text-toolbar tpl:fixed tpl:z-popover tpl:flex tpl:gap-1 tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2 tpl:shadow-lg\"\n :style=\"{\n ...themeStyles,\n top: `${toolbarPosition.top}px`,\n left: `${toolbarPosition.left}px`,\n transform: 'translateY(-100%)',\n flexDirection: 'column',\n }\"\n >\n <template v-if=\"!isLoading && editor\">\n <!-- Row 1: Font family, Font size, Text color, Bold/Italic/Underline/Strikethrough -->\n <div class=\"tpl:flex tpl:items-center tpl:gap-1\">\n <ToolbarSelect\n :model-value=\"textStyleAttr('fontFamily')\"\n :options=\"fontFamilies\"\n :label=\"t.paragraphEditor.fontFamily\"\n :placeholder=\"t.paragraphEditor.defaultFont\"\n width-class=\"tpl:w-32\"\n @update:model-value=\"setFontFamily\"\n />\n <ToolbarSelect\n :model-value=\"textStyleAttr('fontSize')\"\n :options=\"FONT_SIZE_OPTIONS\"\n :label=\"t.paragraphEditor.fontSize\"\n :placeholder=\"t.paragraphEditor.defaultSize\"\n width-class=\"tpl:w-20\"\n @update:model-value=\"setFontSize\"\n />\n <ToolbarSeparator />\n <div class=\"tpl:relative\">\n <input\n type=\"color\"\n class=\"tpl:size-8 tpl:cursor-pointer tpl:rounded tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-1\"\n :value=\"textStyleAttr('color') || DEFAULT_TEXT_COLOR\"\n :aria-label=\"t.paragraphEditor.textColor\"\n :title=\"t.paragraphEditor.textColor\"\n @input=\"setColor(($event.target as HTMLInputElement).value)\"\n />\n </div>\n <div class=\"tpl:relative\">\n <input\n type=\"color\"\n class=\"tpl:size-8 tpl:cursor-pointer tpl:rounded tpl:border tpl:border-[var(--tpl-border)] tpl:p-1\"\n :style=\"{\n backgroundColor: getCurrentHighlight() || 'var(--tpl-bg)',\n }\"\n :value=\"getCurrentHighlight() || DEFAULT_HIGHLIGHT_COLOR\"\n :aria-label=\"t.paragraphEditor.highlightColor\"\n :title=\"t.paragraphEditor.highlightColor\"\n @input=\"setHighlight(($event.target as HTMLInputElement).value)\"\n />\n </div>\n <ToolbarSeparator />\n <ToolbarIconButton\n :icon=\"Bold\"\n :label=\"t.paragraphEditor.bold\"\n :active=\"editor.isActive('bold')\"\n :stroke-width=\"2.5\"\n @click=\"editor.chain().focus().toggleBold().run()\"\n />\n <ToolbarIconButton\n :icon=\"Italic\"\n :label=\"t.paragraphEditor.italic\"\n :active=\"editor.isActive('italic')\"\n @click=\"editor.chain().focus().toggleItalic().run()\"\n />\n <ToolbarIconButton\n :icon=\"Underline\"\n :label=\"t.paragraphEditor.underline\"\n :active=\"editor.isActive('underline')\"\n @click=\"editor.chain().focus().toggleUnderline().run()\"\n />\n <ToolbarIconButton\n :icon=\"Strikethrough\"\n :label=\"t.paragraphEditor.strikethrough\"\n :active=\"editor.isActive('strike')\"\n @click=\"editor.chain().focus().toggleStrike().run()\"\n />\n <ToolbarSeparator />\n <ToolbarIconButton\n :icon=\"Subscript\"\n :label=\"t.paragraphEditor.subscript\"\n :active=\"editor.isActive('subscript')\"\n @click=\"editor.chain().focus().toggleSubscript().run()\"\n />\n <ToolbarIconButton\n :icon=\"Superscript\"\n :label=\"t.paragraphEditor.superscript\"\n :active=\"editor.isActive('superscript')\"\n @click=\"editor.chain().focus().toggleSuperscript().run()\"\n />\n <ToolbarSeparator />\n <ToolbarIconButton\n :icon=\"Link\"\n :label=\"t.paragraphEditor.addLink\"\n :active=\"editor.isActive('link')\"\n @click=\"emit('open-link-dialog')\"\n />\n </div>\n <!-- Row 2: Lists, Alignment, LH, LS, Clear, Emoji, Merge tags -->\n <div class=\"tpl:flex tpl:items-center tpl:gap-1\">\n <ToolbarIconButton\n :icon=\"List\"\n :label=\"t.paragraphEditor.bulletList\"\n :active=\"editor.isActive('bulletList')\"\n @click=\"editor.chain().focus().toggleBulletList().run()\"\n />\n <ToolbarIconButton\n :icon=\"ListOrdered\"\n :label=\"t.paragraphEditor.numberedList\"\n :active=\"editor.isActive('orderedList')\"\n @click=\"editor.chain().focus().toggleOrderedList().run()\"\n />\n <ToolbarSeparator />\n <ToolbarIconButton\n :icon=\"AlignLeft\"\n :label=\"t.paragraphEditor.alignLeft\"\n :active=\"editor.isActive({ textAlign: 'left' })\"\n @click=\"editor.chain().focus().setTextAlign('left').run()\"\n />\n <ToolbarIconButton\n :icon=\"AlignCenter\"\n :label=\"t.paragraphEditor.alignCenter\"\n :active=\"editor.isActive({ textAlign: 'center' })\"\n @click=\"editor.chain().focus().setTextAlign('center').run()\"\n />\n <ToolbarIconButton\n :icon=\"AlignRight\"\n :label=\"t.paragraphEditor.alignRight\"\n :active=\"editor.isActive({ textAlign: 'right' })\"\n @click=\"editor.chain().focus().setTextAlign('right').run()\"\n />\n <ToolbarSeparator />\n <ToolbarSelect\n :model-value=\"getCurrentLineHeight()\"\n :options=\"LINE_HEIGHT_OPTIONS\"\n :label=\"t.paragraphEditor.lineHeight\"\n placeholder=\"LH\"\n width-class=\"tpl:w-16\"\n @update:model-value=\"setLineHeight\"\n />\n <ToolbarSelect\n :model-value=\"textStyleAttr('letterSpacing')\"\n :options=\"LETTER_SPACING_OPTIONS\"\n :label=\"t.paragraphEditor.letterSpacing\"\n placeholder=\"LS\"\n width-class=\"tpl:w-20\"\n @update:model-value=\"setLetterSpacing\"\n />\n <ToolbarSeparator />\n <ToolbarIconButton\n :icon=\"RemoveFormatting\"\n :label=\"t.paragraphEditor.clearFormatting\"\n @click=\"editor.chain().focus().clearNodes().unsetAllMarks().run()\"\n />\n <ToolbarSeparator />\n <EmojiPickerDropdown @insert=\"insertEmoji\" />\n <template v-if=\"canRequestMergeTag\">\n <ToolbarSeparator />\n <button\n type=\"button\"\n class=\"tpl:flex tpl:h-8 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-bg-active)]\"\n :aria-label=\"t.mergeTag.add\"\n :title=\"t.mergeTag.add\"\n @click=\"emit('add-merge-tag')\"\n >\n <ScanLine :size=\"16\" :stroke-width=\"2\" />\n {{ t.mergeTag.add }}\n </button>\n </template>\n </div>\n </template>\n <template v-else>\n <div\n class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:px-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n >\n <LoaderCircle class=\"tpl-spinner\" :size=\"14\" :stroke-width=\"2\" />\n {{ t.errors.editorLoading }}\n </div>\n </template>\n </div>\n </Teleport>\n</template>\n","<script setup lang=\"ts\">\nimport { useRichTextEditor } from \"../../composables/useRichTextEditor\";\nimport type { ParagraphBlock as ParagraphBlockType } from \"@aswin.dev/types\";\nimport ParagraphToolbar from \"./ParagraphToolbar.vue\";\nimport RichTextLinkDialog from \"./RichTextLinkDialog.vue\";\nimport RichTextEditorContent from \"./RichTextEditorContent.vue\";\n\nconst props = defineProps<{\n block: ParagraphBlockType;\n toolbarPosition: { top: number; left: number };\n}>();\n\nconst emit = defineEmits<{\n (e: \"done\"): void;\n}>();\n\nconst {\n editor,\n EditorContent,\n isLoading,\n initError,\n retry,\n showLinkDialog,\n linkUrl,\n linkDialogRef,\n canRequestMergeTag,\n openLinkDialog,\n insertLink,\n removeLink,\n closeLinkDialog,\n handleLinkKeydown,\n handleAddMergeTag,\n} = useRichTextEditor({\n blockId: () => props.block.id,\n blockContent: () => props.block.content,\n onDone: () => emit(\"done\"),\n editorName: \"ParagraphEditor\",\n async loadExtensions({\n mergeTags,\n syntax,\n triggerChar,\n autocompleteEnabled,\n suggestionEmptyText,\n }) {\n const [\n { Editor: TiptapEditor, EditorContent: EC },\n { default: StarterKit },\n { default: LinkExt },\n { default: UnderlineExt },\n { default: SubscriptExt },\n { default: SuperscriptExt },\n { default: TextAlign },\n { TextStyle },\n { default: Color },\n { default: FontFamily },\n { default: Highlight },\n {\n MergeTagNode,\n MergeTagSuggestion,\n LogicMergeTagNode,\n FontSize,\n LineHeight,\n LetterSpacing,\n },\n ] = await Promise.all([\n import(\"@tiptap/vue-3\"),\n import(\"@tiptap/starter-kit\"),\n import(\"@tiptap/extension-link\"),\n import(\"@tiptap/extension-underline\"),\n import(\"@tiptap/extension-subscript\"),\n import(\"@tiptap/extension-superscript\"),\n import(\"@tiptap/extension-text-align\"),\n import(\"@tiptap/extension-text-style\"),\n import(\"@tiptap/extension-color\"),\n import(\"@tiptap/extension-font-family\"),\n import(\"@tiptap/extension-highlight\"),\n import(\"../../extensions\"),\n ]);\n\n return {\n TiptapEditor,\n EC,\n extensions: [\n StarterKit.configure({\n heading: false,\n codeBlock: false,\n blockquote: false,\n horizontalRule: false,\n }),\n UnderlineExt,\n SubscriptExt,\n SuperscriptExt,\n LinkExt.configure({\n openOnClick: false,\n HTMLAttributes: {\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n },\n }),\n TextAlign.configure({ types: [\"paragraph\"] }),\n TextStyle,\n Color,\n FontFamily,\n Highlight.configure({ multicolor: true }),\n FontSize,\n LineHeight,\n LetterSpacing,\n MergeTagNode.configure({ mergeTags, syntax }),\n LogicMergeTagNode.configure({ syntax }),\n ...(autocompleteEnabled && triggerChar && mergeTags.length > 0\n ? [\n MergeTagSuggestion.configure({\n mergeTags,\n char: triggerChar,\n emptyText: suggestionEmptyText,\n }),\n ]\n : []),\n ],\n };\n },\n});\n</script>\n\n<template>\n <div class=\"tpl-text-editor-wrapper tpl:relative\">\n <ParagraphToolbar\n :editor=\"editor\"\n :toolbar-position=\"toolbarPosition\"\n :is-loading=\"isLoading\"\n :can-request-merge-tag=\"canRequestMergeTag\"\n @open-link-dialog=\"openLinkDialog\"\n @add-merge-tag=\"handleAddMergeTag\"\n />\n\n <RichTextEditorContent\n :editor=\"editor\"\n :editor-content=\"EditorContent\"\n :is-loading=\"isLoading\"\n :init-error=\"initError\"\n @retry=\"retry\"\n />\n\n <RichTextLinkDialog\n :visible=\"showLinkDialog\"\n :is-editing-link=\"editor?.isActive('link') ?? false\"\n v-model:dialog-ref=\"linkDialogRef\"\n v-model:link-url=\"linkUrl\"\n @close=\"closeLinkDialog\"\n @insert=\"insertLink\"\n @remove=\"removeLink\"\n @keydown=\"handleLinkKeydown\"\n />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useRichTextEditor } from \"../../composables/useRichTextEditor\";\nimport type { ParagraphBlock as ParagraphBlockType } from \"@aswin.dev/types\";\nimport ParagraphToolbar from \"./ParagraphToolbar.vue\";\nimport RichTextLinkDialog from \"./RichTextLinkDialog.vue\";\nimport RichTextEditorContent from \"./RichTextEditorContent.vue\";\n\nconst props = defineProps<{\n block: ParagraphBlockType;\n toolbarPosition: { top: number; left: number };\n}>();\n\nconst emit = defineEmits<{\n (e: \"done\"): void;\n}>();\n\nconst {\n editor,\n EditorContent,\n isLoading,\n initError,\n retry,\n showLinkDialog,\n linkUrl,\n linkDialogRef,\n canRequestMergeTag,\n openLinkDialog,\n insertLink,\n removeLink,\n closeLinkDialog,\n handleLinkKeydown,\n handleAddMergeTag,\n} = useRichTextEditor({\n blockId: () => props.block.id,\n blockContent: () => props.block.content,\n onDone: () => emit(\"done\"),\n editorName: \"ParagraphEditor\",\n async loadExtensions({\n mergeTags,\n syntax,\n triggerChar,\n autocompleteEnabled,\n suggestionEmptyText,\n }) {\n const [\n { Editor: TiptapEditor, EditorContent: EC },\n { default: StarterKit },\n { default: LinkExt },\n { default: UnderlineExt },\n { default: SubscriptExt },\n { default: SuperscriptExt },\n { default: TextAlign },\n { TextStyle },\n { default: Color },\n { default: FontFamily },\n { default: Highlight },\n {\n MergeTagNode,\n MergeTagSuggestion,\n LogicMergeTagNode,\n FontSize,\n LineHeight,\n LetterSpacing,\n },\n ] = await Promise.all([\n import(\"@tiptap/vue-3\"),\n import(\"@tiptap/starter-kit\"),\n import(\"@tiptap/extension-link\"),\n import(\"@tiptap/extension-underline\"),\n import(\"@tiptap/extension-subscript\"),\n import(\"@tiptap/extension-superscript\"),\n import(\"@tiptap/extension-text-align\"),\n import(\"@tiptap/extension-text-style\"),\n import(\"@tiptap/extension-color\"),\n import(\"@tiptap/extension-font-family\"),\n import(\"@tiptap/extension-highlight\"),\n import(\"../../extensions\"),\n ]);\n\n return {\n TiptapEditor,\n EC,\n extensions: [\n StarterKit.configure({\n heading: false,\n codeBlock: false,\n blockquote: false,\n horizontalRule: false,\n }),\n UnderlineExt,\n SubscriptExt,\n SuperscriptExt,\n LinkExt.configure({\n openOnClick: false,\n HTMLAttributes: {\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n },\n }),\n TextAlign.configure({ types: [\"paragraph\"] }),\n TextStyle,\n Color,\n FontFamily,\n Highlight.configure({ multicolor: true }),\n FontSize,\n LineHeight,\n LetterSpacing,\n MergeTagNode.configure({ mergeTags, syntax }),\n LogicMergeTagNode.configure({ syntax }),\n ...(autocompleteEnabled && triggerChar && mergeTags.length > 0\n ? [\n MergeTagSuggestion.configure({\n mergeTags,\n char: triggerChar,\n emptyText: suggestionEmptyText,\n }),\n ]\n : []),\n ],\n };\n },\n});\n</script>\n\n<template>\n <div class=\"tpl-text-editor-wrapper tpl:relative\">\n <ParagraphToolbar\n :editor=\"editor\"\n :toolbar-position=\"toolbarPosition\"\n :is-loading=\"isLoading\"\n :can-request-merge-tag=\"canRequestMergeTag\"\n @open-link-dialog=\"openLinkDialog\"\n @add-merge-tag=\"handleAddMergeTag\"\n />\n\n <RichTextEditorContent\n :editor=\"editor\"\n :editor-content=\"EditorContent\"\n :is-loading=\"isLoading\"\n :init-error=\"initError\"\n @retry=\"retry\"\n />\n\n <RichTextLinkDialog\n :visible=\"showLinkDialog\"\n :is-editing-link=\"editor?.isActive('link') ?? false\"\n v-model:dialog-ref=\"linkDialogRef\"\n v-model:link-url=\"linkUrl\"\n @close=\"closeLinkDialog\"\n @insert=\"insertLink\"\n @remove=\"removeLink\"\n @keydown=\"handleLinkKeydown\"\n />\n </div>\n</template>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ParagraphEditor-1XJOpiLX.js","names":[],"sources":["../../../src/components/blocks/EmojiPickerDropdown.vue","../../../src/components/blocks/EmojiPickerDropdown.vue","../../../src/components/toolbar/ToolbarIconButton.vue","../../../src/components/toolbar/ToolbarIconButton.vue","../../../src/components/toolbar/ToolbarSeparator.vue","../../../src/components/toolbar/ToolbarSelect.vue","../../../src/components/toolbar/ToolbarSelect.vue","../../../src/components/blocks/ParagraphToolbar.vue","../../../src/components/blocks/ParagraphToolbar.vue","../../../src/components/blocks/ParagraphEditor.vue","../../../src/components/blocks/ParagraphEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useEmoji, useI18n } from \"../../composables\";\nimport { useFocusTrap } from \"../../composables/useFocusTrap\";\nimport { onClickOutside } from \"@vueuse/core\";\nimport { Smile } from \"@lucide/vue\";\nimport { computed, ref } from \"vue\";\n\nconst emit = defineEmits<{\n (e: \"insert\", emoji: string): void;\n}>();\n\nconst {\n categories: emojiCategories,\n isOpen: showEmojiPicker,\n toggle: toggleEmojiPicker,\n close: closeEmojiPicker,\n} = useEmoji();\n\nconst { t, format } = useI18n();\n\nconst pickerRef = ref<HTMLElement | null>(null);\nconst rootRef = ref<HTMLElement | null>(null);\n\nconst isOpenRef = computed(() => showEmojiPicker.value);\nuseFocusTrap(pickerRef, isOpenRef);\n\nonClickOutside(rootRef, () => {\n if (showEmojiPicker.value) {\n closeEmojiPicker();\n }\n});\n\nfunction handleInsert(emoji: string): void {\n emit(\"insert\", emoji);\n closeEmojiPicker();\n}\n</script>\n\n<template>\n <div ref=\"rootRef\" class=\"tpl:relative\">\n <button\n type=\"button\"\n class=\"tpl-text-toolbar-btn\"\n :class=\"{\n 'tpl-text-toolbar-btn--active': showEmojiPicker,\n }\"\n :aria-label=\"t.paragraphEditor.insertEmoji\"\n :title=\"t.paragraphEditor.insertEmoji\"\n :aria-expanded=\"showEmojiPicker\"\n aria-haspopup=\"dialog\"\n aria-controls=\"tpl-emoji-picker\"\n @click=\"toggleEmojiPicker\"\n >\n <Smile :size=\"16\" :stroke-width=\"2\" />\n </button>\n <div\n v-if=\"showEmojiPicker\"\n id=\"tpl-emoji-picker\"\n ref=\"pickerRef\"\n role=\"dialog\"\n aria-modal=\"false\"\n :aria-label=\"t.paragraphEditor.insertEmoji\"\n tabindex=\"-1\"\n class=\"tpl-emoji-picker tpl:absolute tpl:top-full tpl:left-0 tpl:z-10 tpl:mt-2 tpl:w-72 tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-2 tpl:shadow-lg\"\n @keydown.esc.stop.prevent=\"closeEmojiPicker\"\n >\n <div\n v-for=\"category in emojiCategories\"\n :key=\"category.key\"\n class=\"tpl:mb-2 tpl:last:mb-0\"\n >\n <div\n class=\"tpl:mb-1.5 tpl:text-[10px] tpl:font-medium tpl:tracking-wide tpl:text-[var(--tpl-text-muted)] tpl:uppercase\"\n >\n {{ t.emoji[category.key] }}\n </div>\n <div class=\"tpl:grid tpl:grid-cols-10 tpl:gap-0.5\">\n <button\n v-for=\"emoji in category.emojis\"\n :key=\"emoji\"\n type=\"button\"\n :aria-label=\"format(t.paragraphEditor.emojiItemLabel, { emoji })\"\n class=\"tpl:flex tpl:size-6 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:border-none tpl:bg-transparent tpl:text-base tpl:transition-all tpl:duration-100 tpl:hover:scale-125 tpl:hover:bg-[var(--tpl-bg-active)]\"\n @click=\"handleInsert(emoji)\"\n >\n {{ emoji }}\n </button>\n </div>\n </div>\n </div>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useEmoji, useI18n } from \"../../composables\";\nimport { useFocusTrap } from \"../../composables/useFocusTrap\";\nimport { onClickOutside } from \"@vueuse/core\";\nimport { Smile } from \"@lucide/vue\";\nimport { computed, ref } from \"vue\";\n\nconst emit = defineEmits<{\n (e: \"insert\", emoji: string): void;\n}>();\n\nconst {\n categories: emojiCategories,\n isOpen: showEmojiPicker,\n toggle: toggleEmojiPicker,\n close: closeEmojiPicker,\n} = useEmoji();\n\nconst { t, format } = useI18n();\n\nconst pickerRef = ref<HTMLElement | null>(null);\nconst rootRef = ref<HTMLElement | null>(null);\n\nconst isOpenRef = computed(() => showEmojiPicker.value);\nuseFocusTrap(pickerRef, isOpenRef);\n\nonClickOutside(rootRef, () => {\n if (showEmojiPicker.value) {\n closeEmojiPicker();\n }\n});\n\nfunction handleInsert(emoji: string): void {\n emit(\"insert\", emoji);\n closeEmojiPicker();\n}\n</script>\n\n<template>\n <div ref=\"rootRef\" class=\"tpl:relative\">\n <button\n type=\"button\"\n class=\"tpl-text-toolbar-btn\"\n :class=\"{\n 'tpl-text-toolbar-btn--active': showEmojiPicker,\n }\"\n :aria-label=\"t.paragraphEditor.insertEmoji\"\n :title=\"t.paragraphEditor.insertEmoji\"\n :aria-expanded=\"showEmojiPicker\"\n aria-haspopup=\"dialog\"\n aria-controls=\"tpl-emoji-picker\"\n @click=\"toggleEmojiPicker\"\n >\n <Smile :size=\"16\" :stroke-width=\"2\" />\n </button>\n <div\n v-if=\"showEmojiPicker\"\n id=\"tpl-emoji-picker\"\n ref=\"pickerRef\"\n role=\"dialog\"\n aria-modal=\"false\"\n :aria-label=\"t.paragraphEditor.insertEmoji\"\n tabindex=\"-1\"\n class=\"tpl-emoji-picker tpl:absolute tpl:top-full tpl:left-0 tpl:z-10 tpl:mt-2 tpl:w-72 tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-2 tpl:shadow-lg\"\n @keydown.esc.stop.prevent=\"closeEmojiPicker\"\n >\n <div\n v-for=\"category in emojiCategories\"\n :key=\"category.key\"\n class=\"tpl:mb-2 tpl:last:mb-0\"\n >\n <div\n class=\"tpl:mb-1.5 tpl:text-[10px] tpl:font-medium tpl:tracking-wide tpl:text-[var(--tpl-text-muted)] tpl:uppercase\"\n >\n {{ t.emoji[category.key] }}\n </div>\n <div class=\"tpl:grid tpl:grid-cols-10 tpl:gap-0.5\">\n <button\n v-for=\"emoji in category.emojis\"\n :key=\"emoji\"\n type=\"button\"\n :aria-label=\"format(t.paragraphEditor.emojiItemLabel, { emoji })\"\n class=\"tpl:flex tpl:size-6 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:border-none tpl:bg-transparent tpl:text-base tpl:transition-all tpl:duration-100 tpl:hover:scale-125 tpl:hover:bg-[var(--tpl-bg-active)]\"\n @click=\"handleInsert(emoji)\"\n >\n {{ emoji }}\n </button>\n </div>\n </div>\n </div>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { Component } from \"vue\";\n\ndefineProps<{\n icon: Component;\n label: string;\n active?: boolean;\n strokeWidth?: number;\n size?: number;\n}>();\n</script>\n\n<template>\n <button\n type=\"button\"\n class=\"tpl-text-toolbar-btn\"\n :class=\"{ 'tpl-text-toolbar-btn--active': active }\"\n :aria-label=\"label\"\n :title=\"label\"\n :aria-pressed=\"active ? 'true' : 'false'\"\n >\n <component :is=\"icon\" :size=\"size ?? 16\" :stroke-width=\"strokeWidth ?? 2\" />\n </button>\n</template>\n","<script setup lang=\"ts\">\nimport type { Component } from \"vue\";\n\ndefineProps<{\n icon: Component;\n label: string;\n active?: boolean;\n strokeWidth?: number;\n size?: number;\n}>();\n</script>\n\n<template>\n <button\n type=\"button\"\n class=\"tpl-text-toolbar-btn\"\n :class=\"{ 'tpl-text-toolbar-btn--active': active }\"\n :aria-label=\"label\"\n :title=\"label\"\n :aria-pressed=\"active ? 'true' : 'false'\"\n >\n <component :is=\"icon\" :size=\"size ?? 16\" :stroke-width=\"strokeWidth ?? 2\" />\n </button>\n</template>\n","<template>\n <span\n class=\"tpl:mx-1 tpl:h-6 tpl:w-px tpl:bg-[var(--tpl-border)]\"\n aria-hidden=\"true\"\n ></span>\n</template>\n","<script setup lang=\"ts\">\ninterface OptionItem {\n value: string;\n label: string;\n}\n\ndefineProps<{\n modelValue: string;\n options: readonly (string | OptionItem)[];\n label: string;\n placeholder?: string;\n widthClass?: string;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: string): void;\n}>();\n\nfunction onChange(e: Event): void {\n emit(\"update:modelValue\", (e.target as HTMLSelectElement).value);\n}\n\nfunction optionValue(opt: string | OptionItem): string {\n return typeof opt === \"string\" ? opt : opt.value;\n}\n\nfunction optionLabel(opt: string | OptionItem): string {\n return typeof opt === \"string\" ? opt : opt.label;\n}\n</script>\n\n<template>\n <select\n :class=\"[\n 'tpl:h-8 tpl:cursor-pointer tpl:rounded tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-2 tpl:text-xs tpl:text-[var(--tpl-text)] tpl:outline-none',\n widthClass ?? 'tpl:w-20',\n ]\"\n :value=\"modelValue\"\n :aria-label=\"label\"\n :title=\"label\"\n @change=\"onChange\"\n >\n <option value=\"\">{{ placeholder ?? \"\" }}</option>\n <option\n v-for=\"opt in options\"\n :key=\"optionValue(opt)\"\n :value=\"optionValue(opt)\"\n >\n {{ optionLabel(opt) }}\n </option>\n </select>\n</template>\n","<script setup lang=\"ts\">\ninterface OptionItem {\n value: string;\n label: string;\n}\n\ndefineProps<{\n modelValue: string;\n options: readonly (string | OptionItem)[];\n label: string;\n placeholder?: string;\n widthClass?: string;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: string): void;\n}>();\n\nfunction onChange(e: Event): void {\n emit(\"update:modelValue\", (e.target as HTMLSelectElement).value);\n}\n\nfunction optionValue(opt: string | OptionItem): string {\n return typeof opt === \"string\" ? opt : opt.value;\n}\n\nfunction optionLabel(opt: string | OptionItem): string {\n return typeof opt === \"string\" ? opt : opt.label;\n}\n</script>\n\n<template>\n <select\n :class=\"[\n 'tpl:h-8 tpl:cursor-pointer tpl:rounded tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-2 tpl:text-xs tpl:text-[var(--tpl-text)] tpl:outline-none',\n widthClass ?? 'tpl:w-20',\n ]\"\n :value=\"modelValue\"\n :aria-label=\"label\"\n :title=\"label\"\n @change=\"onChange\"\n >\n <option value=\"\">{{ placeholder ?? \"\" }}</option>\n <option\n v-for=\"opt in options\"\n :key=\"optionValue(opt)\"\n :value=\"optionValue(opt)\"\n >\n {{ optionLabel(opt) }}\n </option>\n </select>\n</template>\n","<script setup lang=\"ts\">\nimport EmojiPickerDropdown from \"./EmojiPickerDropdown.vue\";\nimport ToolbarIconButton from \"../toolbar/ToolbarIconButton.vue\";\nimport ToolbarSeparator from \"../toolbar/ToolbarSeparator.vue\";\nimport ToolbarSelect from \"../toolbar/ToolbarSelect.vue\";\nimport { useI18n } from \"../../composables\";\nimport type { Editor } from \"@tiptap/core\";\nimport {\n AlignCenter,\n AlignLeft,\n AlignRight,\n Bold,\n Italic,\n Link,\n List,\n ListOrdered,\n LoaderCircle,\n RemoveFormatting,\n ScanLine,\n Strikethrough,\n Subscript,\n Superscript,\n Underline,\n} from \"@lucide/vue\";\nimport { inject } from \"vue\";\nimport {\n THEME_STYLES_KEY,\n UI_THEME_KEY,\n FONTS_MANAGER_KEY,\n requireInject,\n} from \"../../keys\";\nimport {\n DEFAULT_TEXT_COLOR,\n DEFAULT_HIGHLIGHT_COLOR,\n FONT_SIZE_OPTIONS,\n LINE_HEIGHT_OPTIONS,\n LETTER_SPACING_OPTIONS,\n} from \"../../constants/styleConstants\";\n\nconst props = defineProps<{\n editor: Editor | null;\n toolbarPosition: { top: number; left: number };\n isLoading: boolean;\n canRequestMergeTag: boolean;\n}>();\n\nconst emit = defineEmits<{\n (e: \"open-link-dialog\"): void;\n (e: \"add-merge-tag\"): void;\n}>();\n\nconst themeStyles = inject(THEME_STYLES_KEY, null);\nconst tplUiTheme = inject(UI_THEME_KEY, null);\nconst fontsManager = requireInject(FONTS_MANAGER_KEY, \"ParagraphToolbar\");\n\nconst { t } = useI18n();\n\nconst fontFamilies = fontsManager.fonts;\n\nfunction insertEmoji(emoji: string): void {\n props.editor?.chain().focus().insertContent(emoji).run();\n}\n\nfunction textStyleAttr(attr: string): string {\n return (props.editor?.getAttributes(\"textStyle\")[attr] as string) || \"\";\n}\n\nfunction setFontFamily(family: string): void {\n const chain = props.editor?.chain().focus();\n if (family) chain?.setFontFamily(family).run();\n else chain?.unsetFontFamily().run();\n}\n\nfunction setFontSize(size: string): void {\n const chain = props.editor?.chain().focus();\n if (size) chain?.setFontSize(size).run();\n else chain?.unsetFontSize().run();\n}\n\nfunction setColor(color: string): void {\n const chain = props.editor?.chain().focus();\n if (color) chain?.setColor(color).run();\n else chain?.unsetColor().run();\n}\n\nfunction getCurrentLineHeight(): string {\n return (props.editor?.getAttributes(\"paragraph\").lineHeight as string) || \"\";\n}\n\nfunction setLineHeight(value: string): void {\n const chain = props.editor?.chain().focus();\n if (value) chain?.setLineHeight(value).run();\n else chain?.unsetLineHeight().run();\n}\n\nfunction setLetterSpacing(value: string): void {\n const chain = props.editor?.chain().focus();\n if (value && value !== \"normal\") chain?.setLetterSpacing(value).run();\n else chain?.unsetLetterSpacing().run();\n}\n\nfunction getCurrentHighlight(): string {\n return (props.editor?.getAttributes(\"highlight\").color as string) || \"\";\n}\n\nfunction setHighlight(color: string): void {\n const chain = props.editor?.chain().focus();\n if (color) chain?.setHighlight({ color }).run();\n else chain?.unsetHighlight().run();\n}\n</script>\n\n<template>\n <Teleport to=\"body\">\n <div\n :data-tpl-theme=\"tplUiTheme\"\n role=\"toolbar\"\n :aria-label=\"t.paragraphEditor.toolbar\"\n class=\"tpl tpl-text-toolbar tpl:fixed tpl:z-popover tpl:flex tpl:gap-1 tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2 tpl:shadow-lg\"\n :style=\"{\n ...themeStyles,\n top: `${toolbarPosition.top}px`,\n left: `${toolbarPosition.left}px`,\n transform: 'translateY(-100%)',\n flexDirection: 'column',\n }\"\n >\n <template v-if=\"!isLoading && editor\">\n <!-- Row 1: Font family, Font size, Text color, Bold/Italic/Underline/Strikethrough -->\n <div class=\"tpl:flex tpl:items-center tpl:gap-1\">\n <ToolbarSelect\n :model-value=\"textStyleAttr('fontFamily')\"\n :options=\"fontFamilies\"\n :label=\"t.paragraphEditor.fontFamily\"\n :placeholder=\"t.paragraphEditor.defaultFont\"\n width-class=\"tpl:w-32\"\n @update:model-value=\"setFontFamily\"\n />\n <ToolbarSelect\n :model-value=\"textStyleAttr('fontSize')\"\n :options=\"FONT_SIZE_OPTIONS\"\n :label=\"t.paragraphEditor.fontSize\"\n :placeholder=\"t.paragraphEditor.defaultSize\"\n width-class=\"tpl:w-20\"\n @update:model-value=\"setFontSize\"\n />\n <ToolbarSeparator />\n <div class=\"tpl:relative\">\n <input\n type=\"color\"\n class=\"tpl:size-8 tpl:cursor-pointer tpl:rounded tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-1\"\n :value=\"textStyleAttr('color') || DEFAULT_TEXT_COLOR\"\n :aria-label=\"t.paragraphEditor.textColor\"\n :title=\"t.paragraphEditor.textColor\"\n @input=\"setColor(($event.target as HTMLInputElement).value)\"\n />\n </div>\n <div class=\"tpl:relative\">\n <input\n type=\"color\"\n class=\"tpl:size-8 tpl:cursor-pointer tpl:rounded tpl:border tpl:border-[var(--tpl-border)] tpl:p-1\"\n :style=\"{\n backgroundColor: getCurrentHighlight() || 'var(--tpl-bg)',\n }\"\n :value=\"getCurrentHighlight() || DEFAULT_HIGHLIGHT_COLOR\"\n :aria-label=\"t.paragraphEditor.highlightColor\"\n :title=\"t.paragraphEditor.highlightColor\"\n @input=\"setHighlight(($event.target as HTMLInputElement).value)\"\n />\n </div>\n <ToolbarSeparator />\n <ToolbarIconButton\n :icon=\"Bold\"\n :label=\"t.paragraphEditor.bold\"\n :active=\"editor.isActive('bold')\"\n :stroke-width=\"2.5\"\n @click=\"editor.chain().focus().toggleBold().run()\"\n />\n <ToolbarIconButton\n :icon=\"Italic\"\n :label=\"t.paragraphEditor.italic\"\n :active=\"editor.isActive('italic')\"\n @click=\"editor.chain().focus().toggleItalic().run()\"\n />\n <ToolbarIconButton\n :icon=\"Underline\"\n :label=\"t.paragraphEditor.underline\"\n :active=\"editor.isActive('underline')\"\n @click=\"editor.chain().focus().toggleUnderline().run()\"\n />\n <ToolbarIconButton\n :icon=\"Strikethrough\"\n :label=\"t.paragraphEditor.strikethrough\"\n :active=\"editor.isActive('strike')\"\n @click=\"editor.chain().focus().toggleStrike().run()\"\n />\n <ToolbarSeparator />\n <ToolbarIconButton\n :icon=\"Subscript\"\n :label=\"t.paragraphEditor.subscript\"\n :active=\"editor.isActive('subscript')\"\n @click=\"editor.chain().focus().toggleSubscript().run()\"\n />\n <ToolbarIconButton\n :icon=\"Superscript\"\n :label=\"t.paragraphEditor.superscript\"\n :active=\"editor.isActive('superscript')\"\n @click=\"editor.chain().focus().toggleSuperscript().run()\"\n />\n <ToolbarSeparator />\n <ToolbarIconButton\n :icon=\"Link\"\n :label=\"t.paragraphEditor.addLink\"\n :active=\"editor.isActive('link')\"\n @click=\"emit('open-link-dialog')\"\n />\n </div>\n <!-- Row 2: Lists, Alignment, LH, LS, Clear, Emoji, Merge tags -->\n <div class=\"tpl:flex tpl:items-center tpl:gap-1\">\n <ToolbarIconButton\n :icon=\"List\"\n :label=\"t.paragraphEditor.bulletList\"\n :active=\"editor.isActive('bulletList')\"\n @click=\"editor.chain().focus().toggleBulletList().run()\"\n />\n <ToolbarIconButton\n :icon=\"ListOrdered\"\n :label=\"t.paragraphEditor.numberedList\"\n :active=\"editor.isActive('orderedList')\"\n @click=\"editor.chain().focus().toggleOrderedList().run()\"\n />\n <ToolbarSeparator />\n <ToolbarIconButton\n :icon=\"AlignLeft\"\n :label=\"t.paragraphEditor.alignLeft\"\n :active=\"editor.isActive({ textAlign: 'left' })\"\n @click=\"editor.chain().focus().setTextAlign('left').run()\"\n />\n <ToolbarIconButton\n :icon=\"AlignCenter\"\n :label=\"t.paragraphEditor.alignCenter\"\n :active=\"editor.isActive({ textAlign: 'center' })\"\n @click=\"editor.chain().focus().setTextAlign('center').run()\"\n />\n <ToolbarIconButton\n :icon=\"AlignRight\"\n :label=\"t.paragraphEditor.alignRight\"\n :active=\"editor.isActive({ textAlign: 'right' })\"\n @click=\"editor.chain().focus().setTextAlign('right').run()\"\n />\n <ToolbarSeparator />\n <ToolbarSelect\n :model-value=\"getCurrentLineHeight()\"\n :options=\"LINE_HEIGHT_OPTIONS\"\n :label=\"t.paragraphEditor.lineHeight\"\n placeholder=\"LH\"\n width-class=\"tpl:w-16\"\n @update:model-value=\"setLineHeight\"\n />\n <ToolbarSelect\n :model-value=\"textStyleAttr('letterSpacing')\"\n :options=\"LETTER_SPACING_OPTIONS\"\n :label=\"t.paragraphEditor.letterSpacing\"\n placeholder=\"LS\"\n width-class=\"tpl:w-20\"\n @update:model-value=\"setLetterSpacing\"\n />\n <ToolbarSeparator />\n <ToolbarIconButton\n :icon=\"RemoveFormatting\"\n :label=\"t.paragraphEditor.clearFormatting\"\n @click=\"editor.chain().focus().clearNodes().unsetAllMarks().run()\"\n />\n <ToolbarSeparator />\n <EmojiPickerDropdown @insert=\"insertEmoji\" />\n <template v-if=\"canRequestMergeTag\">\n <ToolbarSeparator />\n <button\n type=\"button\"\n class=\"tpl:flex tpl:h-8 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-bg-active)]\"\n :aria-label=\"t.mergeTag.add\"\n :title=\"t.mergeTag.add\"\n @click=\"emit('add-merge-tag')\"\n >\n <ScanLine :size=\"16\" :stroke-width=\"2\" />\n {{ t.mergeTag.add }}\n </button>\n </template>\n </div>\n </template>\n <template v-else>\n <div\n class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:px-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n >\n <LoaderCircle class=\"tpl-spinner\" :size=\"14\" :stroke-width=\"2\" />\n {{ t.errors.editorLoading }}\n </div>\n </template>\n </div>\n </Teleport>\n</template>\n","<script setup lang=\"ts\">\nimport EmojiPickerDropdown from \"./EmojiPickerDropdown.vue\";\nimport ToolbarIconButton from \"../toolbar/ToolbarIconButton.vue\";\nimport ToolbarSeparator from \"../toolbar/ToolbarSeparator.vue\";\nimport ToolbarSelect from \"../toolbar/ToolbarSelect.vue\";\nimport { useI18n } from \"../../composables\";\nimport type { Editor } from \"@tiptap/core\";\nimport {\n AlignCenter,\n AlignLeft,\n AlignRight,\n Bold,\n Italic,\n Link,\n List,\n ListOrdered,\n LoaderCircle,\n RemoveFormatting,\n ScanLine,\n Strikethrough,\n Subscript,\n Superscript,\n Underline,\n} from \"@lucide/vue\";\nimport { inject } from \"vue\";\nimport {\n THEME_STYLES_KEY,\n UI_THEME_KEY,\n FONTS_MANAGER_KEY,\n requireInject,\n} from \"../../keys\";\nimport {\n DEFAULT_TEXT_COLOR,\n DEFAULT_HIGHLIGHT_COLOR,\n FONT_SIZE_OPTIONS,\n LINE_HEIGHT_OPTIONS,\n LETTER_SPACING_OPTIONS,\n} from \"../../constants/styleConstants\";\n\nconst props = defineProps<{\n editor: Editor | null;\n toolbarPosition: { top: number; left: number };\n isLoading: boolean;\n canRequestMergeTag: boolean;\n}>();\n\nconst emit = defineEmits<{\n (e: \"open-link-dialog\"): void;\n (e: \"add-merge-tag\"): void;\n}>();\n\nconst themeStyles = inject(THEME_STYLES_KEY, null);\nconst tplUiTheme = inject(UI_THEME_KEY, null);\nconst fontsManager = requireInject(FONTS_MANAGER_KEY, \"ParagraphToolbar\");\n\nconst { t } = useI18n();\n\nconst fontFamilies = fontsManager.fonts;\n\nfunction insertEmoji(emoji: string): void {\n props.editor?.chain().focus().insertContent(emoji).run();\n}\n\nfunction textStyleAttr(attr: string): string {\n return (props.editor?.getAttributes(\"textStyle\")[attr] as string) || \"\";\n}\n\nfunction setFontFamily(family: string): void {\n const chain = props.editor?.chain().focus();\n if (family) chain?.setFontFamily(family).run();\n else chain?.unsetFontFamily().run();\n}\n\nfunction setFontSize(size: string): void {\n const chain = props.editor?.chain().focus();\n if (size) chain?.setFontSize(size).run();\n else chain?.unsetFontSize().run();\n}\n\nfunction setColor(color: string): void {\n const chain = props.editor?.chain().focus();\n if (color) chain?.setColor(color).run();\n else chain?.unsetColor().run();\n}\n\nfunction getCurrentLineHeight(): string {\n return (props.editor?.getAttributes(\"paragraph\").lineHeight as string) || \"\";\n}\n\nfunction setLineHeight(value: string): void {\n const chain = props.editor?.chain().focus();\n if (value) chain?.setLineHeight(value).run();\n else chain?.unsetLineHeight().run();\n}\n\nfunction setLetterSpacing(value: string): void {\n const chain = props.editor?.chain().focus();\n if (value && value !== \"normal\") chain?.setLetterSpacing(value).run();\n else chain?.unsetLetterSpacing().run();\n}\n\nfunction getCurrentHighlight(): string {\n return (props.editor?.getAttributes(\"highlight\").color as string) || \"\";\n}\n\nfunction setHighlight(color: string): void {\n const chain = props.editor?.chain().focus();\n if (color) chain?.setHighlight({ color }).run();\n else chain?.unsetHighlight().run();\n}\n</script>\n\n<template>\n <Teleport to=\"body\">\n <div\n :data-tpl-theme=\"tplUiTheme\"\n role=\"toolbar\"\n :aria-label=\"t.paragraphEditor.toolbar\"\n class=\"tpl tpl-text-toolbar tpl:fixed tpl:z-popover tpl:flex tpl:gap-1 tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2 tpl:shadow-lg\"\n :style=\"{\n ...themeStyles,\n top: `${toolbarPosition.top}px`,\n left: `${toolbarPosition.left}px`,\n transform: 'translateY(-100%)',\n flexDirection: 'column',\n }\"\n >\n <template v-if=\"!isLoading && editor\">\n <!-- Row 1: Font family, Font size, Text color, Bold/Italic/Underline/Strikethrough -->\n <div class=\"tpl:flex tpl:items-center tpl:gap-1\">\n <ToolbarSelect\n :model-value=\"textStyleAttr('fontFamily')\"\n :options=\"fontFamilies\"\n :label=\"t.paragraphEditor.fontFamily\"\n :placeholder=\"t.paragraphEditor.defaultFont\"\n width-class=\"tpl:w-32\"\n @update:model-value=\"setFontFamily\"\n />\n <ToolbarSelect\n :model-value=\"textStyleAttr('fontSize')\"\n :options=\"FONT_SIZE_OPTIONS\"\n :label=\"t.paragraphEditor.fontSize\"\n :placeholder=\"t.paragraphEditor.defaultSize\"\n width-class=\"tpl:w-20\"\n @update:model-value=\"setFontSize\"\n />\n <ToolbarSeparator />\n <div class=\"tpl:relative\">\n <input\n type=\"color\"\n class=\"tpl:size-8 tpl:cursor-pointer tpl:rounded tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-1\"\n :value=\"textStyleAttr('color') || DEFAULT_TEXT_COLOR\"\n :aria-label=\"t.paragraphEditor.textColor\"\n :title=\"t.paragraphEditor.textColor\"\n @input=\"setColor(($event.target as HTMLInputElement).value)\"\n />\n </div>\n <div class=\"tpl:relative\">\n <input\n type=\"color\"\n class=\"tpl:size-8 tpl:cursor-pointer tpl:rounded tpl:border tpl:border-[var(--tpl-border)] tpl:p-1\"\n :style=\"{\n backgroundColor: getCurrentHighlight() || 'var(--tpl-bg)',\n }\"\n :value=\"getCurrentHighlight() || DEFAULT_HIGHLIGHT_COLOR\"\n :aria-label=\"t.paragraphEditor.highlightColor\"\n :title=\"t.paragraphEditor.highlightColor\"\n @input=\"setHighlight(($event.target as HTMLInputElement).value)\"\n />\n </div>\n <ToolbarSeparator />\n <ToolbarIconButton\n :icon=\"Bold\"\n :label=\"t.paragraphEditor.bold\"\n :active=\"editor.isActive('bold')\"\n :stroke-width=\"2.5\"\n @click=\"editor.chain().focus().toggleBold().run()\"\n />\n <ToolbarIconButton\n :icon=\"Italic\"\n :label=\"t.paragraphEditor.italic\"\n :active=\"editor.isActive('italic')\"\n @click=\"editor.chain().focus().toggleItalic().run()\"\n />\n <ToolbarIconButton\n :icon=\"Underline\"\n :label=\"t.paragraphEditor.underline\"\n :active=\"editor.isActive('underline')\"\n @click=\"editor.chain().focus().toggleUnderline().run()\"\n />\n <ToolbarIconButton\n :icon=\"Strikethrough\"\n :label=\"t.paragraphEditor.strikethrough\"\n :active=\"editor.isActive('strike')\"\n @click=\"editor.chain().focus().toggleStrike().run()\"\n />\n <ToolbarSeparator />\n <ToolbarIconButton\n :icon=\"Subscript\"\n :label=\"t.paragraphEditor.subscript\"\n :active=\"editor.isActive('subscript')\"\n @click=\"editor.chain().focus().toggleSubscript().run()\"\n />\n <ToolbarIconButton\n :icon=\"Superscript\"\n :label=\"t.paragraphEditor.superscript\"\n :active=\"editor.isActive('superscript')\"\n @click=\"editor.chain().focus().toggleSuperscript().run()\"\n />\n <ToolbarSeparator />\n <ToolbarIconButton\n :icon=\"Link\"\n :label=\"t.paragraphEditor.addLink\"\n :active=\"editor.isActive('link')\"\n @click=\"emit('open-link-dialog')\"\n />\n </div>\n <!-- Row 2: Lists, Alignment, LH, LS, Clear, Emoji, Merge tags -->\n <div class=\"tpl:flex tpl:items-center tpl:gap-1\">\n <ToolbarIconButton\n :icon=\"List\"\n :label=\"t.paragraphEditor.bulletList\"\n :active=\"editor.isActive('bulletList')\"\n @click=\"editor.chain().focus().toggleBulletList().run()\"\n />\n <ToolbarIconButton\n :icon=\"ListOrdered\"\n :label=\"t.paragraphEditor.numberedList\"\n :active=\"editor.isActive('orderedList')\"\n @click=\"editor.chain().focus().toggleOrderedList().run()\"\n />\n <ToolbarSeparator />\n <ToolbarIconButton\n :icon=\"AlignLeft\"\n :label=\"t.paragraphEditor.alignLeft\"\n :active=\"editor.isActive({ textAlign: 'left' })\"\n @click=\"editor.chain().focus().setTextAlign('left').run()\"\n />\n <ToolbarIconButton\n :icon=\"AlignCenter\"\n :label=\"t.paragraphEditor.alignCenter\"\n :active=\"editor.isActive({ textAlign: 'center' })\"\n @click=\"editor.chain().focus().setTextAlign('center').run()\"\n />\n <ToolbarIconButton\n :icon=\"AlignRight\"\n :label=\"t.paragraphEditor.alignRight\"\n :active=\"editor.isActive({ textAlign: 'right' })\"\n @click=\"editor.chain().focus().setTextAlign('right').run()\"\n />\n <ToolbarSeparator />\n <ToolbarSelect\n :model-value=\"getCurrentLineHeight()\"\n :options=\"LINE_HEIGHT_OPTIONS\"\n :label=\"t.paragraphEditor.lineHeight\"\n placeholder=\"LH\"\n width-class=\"tpl:w-16\"\n @update:model-value=\"setLineHeight\"\n />\n <ToolbarSelect\n :model-value=\"textStyleAttr('letterSpacing')\"\n :options=\"LETTER_SPACING_OPTIONS\"\n :label=\"t.paragraphEditor.letterSpacing\"\n placeholder=\"LS\"\n width-class=\"tpl:w-20\"\n @update:model-value=\"setLetterSpacing\"\n />\n <ToolbarSeparator />\n <ToolbarIconButton\n :icon=\"RemoveFormatting\"\n :label=\"t.paragraphEditor.clearFormatting\"\n @click=\"editor.chain().focus().clearNodes().unsetAllMarks().run()\"\n />\n <ToolbarSeparator />\n <EmojiPickerDropdown @insert=\"insertEmoji\" />\n <template v-if=\"canRequestMergeTag\">\n <ToolbarSeparator />\n <button\n type=\"button\"\n class=\"tpl:flex tpl:h-8 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-bg-active)]\"\n :aria-label=\"t.mergeTag.add\"\n :title=\"t.mergeTag.add\"\n @click=\"emit('add-merge-tag')\"\n >\n <ScanLine :size=\"16\" :stroke-width=\"2\" />\n {{ t.mergeTag.add }}\n </button>\n </template>\n </div>\n </template>\n <template v-else>\n <div\n class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:px-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n >\n <LoaderCircle class=\"tpl-spinner\" :size=\"14\" :stroke-width=\"2\" />\n {{ t.errors.editorLoading }}\n </div>\n </template>\n </div>\n </Teleport>\n</template>\n","<script setup lang=\"ts\">\nimport { useRichTextEditor } from \"../../composables/useRichTextEditor\";\nimport type { ParagraphBlock as ParagraphBlockType } from \"@aswin.dev/types\";\nimport ParagraphToolbar from \"./ParagraphToolbar.vue\";\nimport RichTextLinkDialog from \"./RichTextLinkDialog.vue\";\nimport RichTextEditorContent from \"./RichTextEditorContent.vue\";\n\nconst props = defineProps<{\n block: ParagraphBlockType;\n toolbarPosition: { top: number; left: number };\n}>();\n\nconst emit = defineEmits<{\n (e: \"done\"): void;\n}>();\n\nconst {\n editor,\n EditorContent,\n isLoading,\n initError,\n retry,\n showLinkDialog,\n linkUrl,\n linkDialogRef,\n canRequestMergeTag,\n openLinkDialog,\n insertLink,\n removeLink,\n closeLinkDialog,\n handleLinkKeydown,\n handleAddMergeTag,\n} = useRichTextEditor({\n blockId: () => props.block.id,\n blockContent: () => props.block.content,\n onDone: () => emit(\"done\"),\n editorName: \"ParagraphEditor\",\n async loadExtensions({\n mergeTags,\n syntax,\n triggerChar,\n autocompleteEnabled,\n suggestionEmptyText,\n }) {\n const [\n { Editor: TiptapEditor, EditorContent: EC },\n { default: StarterKit },\n { default: LinkExt },\n { default: UnderlineExt },\n { default: SubscriptExt },\n { default: SuperscriptExt },\n { default: TextAlign },\n { TextStyle },\n { default: Color },\n { default: FontFamily },\n { default: Highlight },\n {\n MergeTagNode,\n MergeTagSuggestion,\n LogicMergeTagNode,\n FontSize,\n LineHeight,\n LetterSpacing,\n },\n ] = await Promise.all([\n import(\"@tiptap/vue-3\"),\n import(\"@tiptap/starter-kit\"),\n import(\"@tiptap/extension-link\"),\n import(\"@tiptap/extension-underline\"),\n import(\"@tiptap/extension-subscript\"),\n import(\"@tiptap/extension-superscript\"),\n import(\"@tiptap/extension-text-align\"),\n import(\"@tiptap/extension-text-style\"),\n import(\"@tiptap/extension-color\"),\n import(\"@tiptap/extension-font-family\"),\n import(\"@tiptap/extension-highlight\"),\n import(\"../../extensions\"),\n ]);\n\n return {\n TiptapEditor,\n EC,\n extensions: [\n StarterKit.configure({\n heading: false,\n codeBlock: false,\n blockquote: false,\n horizontalRule: false,\n }),\n UnderlineExt,\n SubscriptExt,\n SuperscriptExt,\n LinkExt.configure({\n openOnClick: false,\n HTMLAttributes: {\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n },\n }),\n TextAlign.configure({ types: [\"paragraph\"] }),\n TextStyle,\n Color,\n FontFamily,\n Highlight.configure({ multicolor: true }),\n FontSize,\n LineHeight,\n LetterSpacing,\n MergeTagNode.configure({ mergeTags, syntax }),\n LogicMergeTagNode.configure({ syntax }),\n ...(autocompleteEnabled && triggerChar && mergeTags.length > 0\n ? [\n MergeTagSuggestion.configure({\n mergeTags,\n char: triggerChar,\n emptyText: suggestionEmptyText,\n }),\n ]\n : []),\n ],\n };\n },\n});\n</script>\n\n<template>\n <div class=\"tpl-text-editor-wrapper tpl:relative\">\n <ParagraphToolbar\n :editor=\"editor\"\n :toolbar-position=\"toolbarPosition\"\n :is-loading=\"isLoading\"\n :can-request-merge-tag=\"canRequestMergeTag\"\n @open-link-dialog=\"openLinkDialog\"\n @add-merge-tag=\"handleAddMergeTag\"\n />\n\n <RichTextEditorContent\n :editor=\"editor\"\n :editor-content=\"EditorContent\"\n :is-loading=\"isLoading\"\n :init-error=\"initError\"\n @retry=\"retry\"\n />\n\n <RichTextLinkDialog\n :visible=\"showLinkDialog\"\n :is-editing-link=\"editor?.isActive('link') ?? false\"\n v-model:dialog-ref=\"linkDialogRef\"\n v-model:link-url=\"linkUrl\"\n @close=\"closeLinkDialog\"\n @insert=\"insertLink\"\n @remove=\"removeLink\"\n @keydown=\"handleLinkKeydown\"\n />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useRichTextEditor } from \"../../composables/useRichTextEditor\";\nimport type { ParagraphBlock as ParagraphBlockType } from \"@aswin.dev/types\";\nimport ParagraphToolbar from \"./ParagraphToolbar.vue\";\nimport RichTextLinkDialog from \"./RichTextLinkDialog.vue\";\nimport RichTextEditorContent from \"./RichTextEditorContent.vue\";\n\nconst props = defineProps<{\n block: ParagraphBlockType;\n toolbarPosition: { top: number; left: number };\n}>();\n\nconst emit = defineEmits<{\n (e: \"done\"): void;\n}>();\n\nconst {\n editor,\n EditorContent,\n isLoading,\n initError,\n retry,\n showLinkDialog,\n linkUrl,\n linkDialogRef,\n canRequestMergeTag,\n openLinkDialog,\n insertLink,\n removeLink,\n closeLinkDialog,\n handleLinkKeydown,\n handleAddMergeTag,\n} = useRichTextEditor({\n blockId: () => props.block.id,\n blockContent: () => props.block.content,\n onDone: () => emit(\"done\"),\n editorName: \"ParagraphEditor\",\n async loadExtensions({\n mergeTags,\n syntax,\n triggerChar,\n autocompleteEnabled,\n suggestionEmptyText,\n }) {\n const [\n { Editor: TiptapEditor, EditorContent: EC },\n { default: StarterKit },\n { default: LinkExt },\n { default: UnderlineExt },\n { default: SubscriptExt },\n { default: SuperscriptExt },\n { default: TextAlign },\n { TextStyle },\n { default: Color },\n { default: FontFamily },\n { default: Highlight },\n {\n MergeTagNode,\n MergeTagSuggestion,\n LogicMergeTagNode,\n FontSize,\n LineHeight,\n LetterSpacing,\n },\n ] = await Promise.all([\n import(\"@tiptap/vue-3\"),\n import(\"@tiptap/starter-kit\"),\n import(\"@tiptap/extension-link\"),\n import(\"@tiptap/extension-underline\"),\n import(\"@tiptap/extension-subscript\"),\n import(\"@tiptap/extension-superscript\"),\n import(\"@tiptap/extension-text-align\"),\n import(\"@tiptap/extension-text-style\"),\n import(\"@tiptap/extension-color\"),\n import(\"@tiptap/extension-font-family\"),\n import(\"@tiptap/extension-highlight\"),\n import(\"../../extensions\"),\n ]);\n\n return {\n TiptapEditor,\n EC,\n extensions: [\n StarterKit.configure({\n heading: false,\n codeBlock: false,\n blockquote: false,\n horizontalRule: false,\n }),\n UnderlineExt,\n SubscriptExt,\n SuperscriptExt,\n LinkExt.configure({\n openOnClick: false,\n HTMLAttributes: {\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n },\n }),\n TextAlign.configure({ types: [\"paragraph\"] }),\n TextStyle,\n Color,\n FontFamily,\n Highlight.configure({ multicolor: true }),\n FontSize,\n LineHeight,\n LetterSpacing,\n MergeTagNode.configure({ mergeTags, syntax }),\n LogicMergeTagNode.configure({ syntax }),\n ...(autocompleteEnabled && triggerChar && mergeTags.length > 0\n ? [\n MergeTagSuggestion.configure({\n mergeTags,\n char: triggerChar,\n emptyText: suggestionEmptyText,\n }),\n ]\n : []),\n ],\n };\n },\n});\n</script>\n\n<template>\n <div class=\"tpl-text-editor-wrapper tpl:relative\">\n <ParagraphToolbar\n :editor=\"editor\"\n :toolbar-position=\"toolbarPosition\"\n :is-loading=\"isLoading\"\n :can-request-merge-tag=\"canRequestMergeTag\"\n @open-link-dialog=\"openLinkDialog\"\n @add-merge-tag=\"handleAddMergeTag\"\n />\n\n <RichTextEditorContent\n :editor=\"editor\"\n :editor-content=\"EditorContent\"\n :is-loading=\"isLoading\"\n :init-error=\"initError\"\n @retry=\"retry\"\n />\n\n <RichTextLinkDialog\n :visible=\"showLinkDialog\"\n :is-editing-link=\"editor?.isActive('link') ?? false\"\n v-model:dialog-ref=\"linkDialogRef\"\n v-model:link-url=\"linkUrl\"\n @close=\"closeLinkDialog\"\n @insert=\"insertLink\"\n @remove=\"removeLink\"\n @keydown=\"handleLinkKeydown\"\n />\n </div>\n</template>\n"],"mappings":"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"}
|
package/dist/cdn/chunks/{RichTextEditorContent-BtWCA_Oc.js → RichTextEditorContent-C2q8sbp2.js}
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { C as e, D as t, G as n, O as r, P as i, V as a, _ as o, b as s, c, ct as l, d as u, dt as d, ft as f, g as p, h as m, p as h, v as g, x as _, z as v } from "./draggable-C-1_gch3.js";
|
|
2
|
-
import {
|
|
2
|
+
import { Bt as y, cn as b, ln as x, st as S } from "./features-BrvE2Fzv.js";
|
|
3
3
|
//#region src/components/blocks/RichTextLinkDialog.vue?vue&type=script&setup=true&lang.ts
|
|
4
4
|
var C = ["data-tpl-theme"], w = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-5 tpl:py-4" }, T = {
|
|
5
5
|
id: "tpl-link-dialog-title",
|
|
@@ -25,7 +25,7 @@ var C = ["data-tpl-theme"], w = { class: "tpl:flex tpl:items-center tpl:justify-
|
|
|
25
25
|
"keydown"
|
|
26
26
|
], ["update:linkUrl", "update:dialogRef"]),
|
|
27
27
|
setup(e, { emit: r }) {
|
|
28
|
-
let s = a(e, "linkUrl"), v = a(e, "dialogRef"), N = r, P = t(b, null), F = t(
|
|
28
|
+
let s = a(e, "linkUrl"), v = a(e, "dialogRef"), N = r, P = t(b, null), F = t(x, null), { t: I } = y();
|
|
29
29
|
return (t, r) => (i(), p(h, { to: "body" }, [e.visible ? (i(), g("div", {
|
|
30
30
|
key: 0,
|
|
31
31
|
"data-tpl-theme": l(F),
|
|
@@ -44,7 +44,7 @@ var C = ["data-tpl-theme"], w = { class: "tpl:flex tpl:items-center tpl:justify-
|
|
|
44
44
|
"aria-label": l(I).linkDialog.cancel,
|
|
45
45
|
class: "tpl:flex tpl:size-7 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:border-none tpl:bg-transparent tpl:p-0 tpl:text-[var(--tpl-text-muted)] tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]",
|
|
46
46
|
onClick: r[0] ||= (e) => N("close")
|
|
47
|
-
}, [_(l(
|
|
47
|
+
}, [_(l(S), {
|
|
48
48
|
size: 16,
|
|
49
49
|
"stroke-width": 2
|
|
50
50
|
})], 8, E)]),
|
|
@@ -103,4 +103,4 @@ var C = ["data-tpl-theme"], w = { class: "tpl:flex tpl:items-center tpl:justify-
|
|
|
103
103
|
//#endregion
|
|
104
104
|
export { N as n, L as t };
|
|
105
105
|
|
|
106
|
-
//# sourceMappingURL=RichTextEditorContent-
|
|
106
|
+
//# sourceMappingURL=RichTextEditorContent-C2q8sbp2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextEditorContent-BtWCA_Oc.js","names":[],"sources":["../../../src/components/blocks/RichTextLinkDialog.vue","../../../src/components/blocks/RichTextLinkDialog.vue","../../../src/components/blocks/RichTextEditorContent.vue","../../../src/components/blocks/RichTextEditorContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables/useI18n\";\nimport { X } from \"@lucide/vue\";\nimport { inject } from \"vue\";\nimport { THEME_STYLES_KEY, UI_THEME_KEY } from \"../../keys\";\n\ndefineProps<{\n visible: boolean;\n isEditingLink: boolean;\n}>();\n\nconst linkUrl = defineModel<string>(\"linkUrl\", { required: true });\nconst dialogRef = defineModel<HTMLElement | null>(\"dialogRef\", {\n required: true,\n});\n\nconst emit = defineEmits<{\n (e: \"close\"): void;\n (e: \"insert\"): void;\n (e: \"remove\"): void;\n (e: \"keydown\", event: KeyboardEvent): void;\n}>();\n\nconst themeStyles = inject(THEME_STYLES_KEY, null);\nconst tplUiTheme = inject(UI_THEME_KEY, null);\n\nconst { t } = useI18n();\n</script>\n\n<template>\n <Teleport to=\"body\">\n <div\n v-if=\"visible\"\n :data-tpl-theme=\"tplUiTheme\"\n class=\"tpl tpl-link-dialog tpl:fixed tpl:inset-0 tpl:z-modal tpl:flex tpl:items-center tpl:justify-center\"\n :style=\"themeStyles\"\n @click.self=\"emit('close')\"\n >\n <div\n :ref=\"(el) => (dialogRef = el as HTMLElement | null)\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"tpl-link-dialog-title\"\n class=\"tpl:w-[400px] tpl:overflow-hidden tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:shadow-lg\"\n >\n <div\n class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-5 tpl:py-4\"\n >\n <h4\n id=\"tpl-link-dialog-title\"\n class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n {{\n isEditingLink ? t.linkDialog.editLink : t.linkDialog.insertLink\n }}\n </h4>\n <button\n type=\"button\"\n :aria-label=\"t.linkDialog.cancel\"\n class=\"tpl:flex tpl:size-7 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:border-none tpl:bg-transparent tpl:p-0 tpl:text-[var(--tpl-text-muted)] tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]\"\n @click=\"emit('close')\"\n >\n <X :size=\"16\" :stroke-width=\"2\" />\n </button>\n </div>\n <div class=\"tpl:p-5\">\n <div class=\"tpl:mb-4 tpl:last:mb-0\">\n <label\n for=\"tpl-link-dialog-url\"\n class=\"tpl:mb-1.5 tpl:block tpl:text-xs tpl:font-medium tpl:tracking-wide tpl:text-[var(--tpl-text-muted)] tpl:uppercase\"\n >{{ t.linkDialog.urlLabel }}</label\n >\n <input\n id=\"tpl-link-dialog-url\"\n v-model=\"linkUrl\"\n type=\"url\"\n class=\"tpl:w-full tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2.5 tpl:text-sm tpl:text-[var(--tpl-text)] tpl:transition-all tpl:duration-150 tpl:outline-none tpl:placeholder:text-[var(--tpl-text-dim)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[0_0_0_3px_var(--tpl-primary-light)]\"\n :placeholder=\"t.linkDialog.urlPlaceholder\"\n autofocus\n @keydown=\"emit('keydown', $event)\"\n />\n </div>\n </div>\n <div\n class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:px-5 tpl:py-4\"\n >\n <button\n v-if=\"isEditingLink\"\n type=\"button\"\n class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-danger)] tpl:bg-transparent tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:text-[var(--tpl-danger)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-danger-light)]\"\n @click=\"emit('remove')\"\n >\n {{ t.linkDialog.removeLink }}\n </button>\n <div class=\"tpl:ml-auto tpl:flex tpl:gap-2\">\n <button\n type=\"button\"\n class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-transparent tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]\"\n @click=\"emit('close')\"\n >\n {{ t.linkDialog.cancel }}\n </button>\n <button\n type=\"button\"\n class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border-none tpl:bg-[var(--tpl-primary)] tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-primary-hover)] tpl:text-[var(--tpl-bg)]\"\n @click=\"emit('insert')\"\n >\n {{\n isEditingLink\n ? t.linkDialog.updateLink\n : t.linkDialog.insertLink\n }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </Teleport>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables/useI18n\";\nimport { X } from \"@lucide/vue\";\nimport { inject } from \"vue\";\nimport { THEME_STYLES_KEY, UI_THEME_KEY } from \"../../keys\";\n\ndefineProps<{\n visible: boolean;\n isEditingLink: boolean;\n}>();\n\nconst linkUrl = defineModel<string>(\"linkUrl\", { required: true });\nconst dialogRef = defineModel<HTMLElement | null>(\"dialogRef\", {\n required: true,\n});\n\nconst emit = defineEmits<{\n (e: \"close\"): void;\n (e: \"insert\"): void;\n (e: \"remove\"): void;\n (e: \"keydown\", event: KeyboardEvent): void;\n}>();\n\nconst themeStyles = inject(THEME_STYLES_KEY, null);\nconst tplUiTheme = inject(UI_THEME_KEY, null);\n\nconst { t } = useI18n();\n</script>\n\n<template>\n <Teleport to=\"body\">\n <div\n v-if=\"visible\"\n :data-tpl-theme=\"tplUiTheme\"\n class=\"tpl tpl-link-dialog tpl:fixed tpl:inset-0 tpl:z-modal tpl:flex tpl:items-center tpl:justify-center\"\n :style=\"themeStyles\"\n @click.self=\"emit('close')\"\n >\n <div\n :ref=\"(el) => (dialogRef = el as HTMLElement | null)\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"tpl-link-dialog-title\"\n class=\"tpl:w-[400px] tpl:overflow-hidden tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:shadow-lg\"\n >\n <div\n class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-5 tpl:py-4\"\n >\n <h4\n id=\"tpl-link-dialog-title\"\n class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n {{\n isEditingLink ? t.linkDialog.editLink : t.linkDialog.insertLink\n }}\n </h4>\n <button\n type=\"button\"\n :aria-label=\"t.linkDialog.cancel\"\n class=\"tpl:flex tpl:size-7 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:border-none tpl:bg-transparent tpl:p-0 tpl:text-[var(--tpl-text-muted)] tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]\"\n @click=\"emit('close')\"\n >\n <X :size=\"16\" :stroke-width=\"2\" />\n </button>\n </div>\n <div class=\"tpl:p-5\">\n <div class=\"tpl:mb-4 tpl:last:mb-0\">\n <label\n for=\"tpl-link-dialog-url\"\n class=\"tpl:mb-1.5 tpl:block tpl:text-xs tpl:font-medium tpl:tracking-wide tpl:text-[var(--tpl-text-muted)] tpl:uppercase\"\n >{{ t.linkDialog.urlLabel }}</label\n >\n <input\n id=\"tpl-link-dialog-url\"\n v-model=\"linkUrl\"\n type=\"url\"\n class=\"tpl:w-full tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2.5 tpl:text-sm tpl:text-[var(--tpl-text)] tpl:transition-all tpl:duration-150 tpl:outline-none tpl:placeholder:text-[var(--tpl-text-dim)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[0_0_0_3px_var(--tpl-primary-light)]\"\n :placeholder=\"t.linkDialog.urlPlaceholder\"\n autofocus\n @keydown=\"emit('keydown', $event)\"\n />\n </div>\n </div>\n <div\n class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:px-5 tpl:py-4\"\n >\n <button\n v-if=\"isEditingLink\"\n type=\"button\"\n class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-danger)] tpl:bg-transparent tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:text-[var(--tpl-danger)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-danger-light)]\"\n @click=\"emit('remove')\"\n >\n {{ t.linkDialog.removeLink }}\n </button>\n <div class=\"tpl:ml-auto tpl:flex tpl:gap-2\">\n <button\n type=\"button\"\n class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-transparent tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]\"\n @click=\"emit('close')\"\n >\n {{ t.linkDialog.cancel }}\n </button>\n <button\n type=\"button\"\n class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border-none tpl:bg-[var(--tpl-primary)] tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-primary-hover)] tpl:text-[var(--tpl-bg)]\"\n @click=\"emit('insert')\"\n >\n {{\n isEditingLink\n ? t.linkDialog.updateLink\n : t.linkDialog.insertLink\n }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </Teleport>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables/useI18n\";\nimport type { Editor } from \"@tiptap/vue-3\";\nimport type { Component } from \"vue\";\n\ndefineProps<{\n editor: Editor | null;\n editorContent: Component | null;\n isLoading: boolean;\n initError: string | null;\n}>();\n\nconst emit = defineEmits<{\n (e: \"retry\"): void;\n}>();\n\nconst { t } = useI18n();\n</script>\n\n<template>\n <div\n v-if=\"isLoading\"\n class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:border-[var(--tpl-primary)] tpl:p-2\"\n >\n <div class=\"tpl:animate-pulse tpl:text-[var(--tpl-text-dim)]\">\n {{ t.errors.editorLoading }}\n </div>\n </div>\n <div\n v-else-if=\"initError\"\n class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:p-2 tpl:text-center tpl:text-xs tpl:border-[var(--tpl-danger)] tpl:text-[var(--tpl-text-muted)]\"\n >\n {{ t.errors.editorLoadFailed }}\n <button\n class=\"tpl:ml-1 tpl:cursor-pointer tpl:border-none tpl:bg-transparent tpl:p-0 tpl:underline tpl:text-[var(--tpl-primary)]\"\n @click=\"emit('retry')\"\n >\n {{ t.errors.retry }}\n </button>\n </div>\n <component\n :is=\"editorContent\"\n v-else-if=\"editorContent && editor\"\n :editor=\"editor as Editor\"\n class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:border-[var(--tpl-primary)] tpl:p-2\"\n />\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables/useI18n\";\nimport type { Editor } from \"@tiptap/vue-3\";\nimport type { Component } from \"vue\";\n\ndefineProps<{\n editor: Editor | null;\n editorContent: Component | null;\n isLoading: boolean;\n initError: string | null;\n}>();\n\nconst emit = defineEmits<{\n (e: \"retry\"): void;\n}>();\n\nconst { t } = useI18n();\n</script>\n\n<template>\n <div\n v-if=\"isLoading\"\n class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:border-[var(--tpl-primary)] tpl:p-2\"\n >\n <div class=\"tpl:animate-pulse tpl:text-[var(--tpl-text-dim)]\">\n {{ t.errors.editorLoading }}\n </div>\n </div>\n <div\n v-else-if=\"initError\"\n class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:p-2 tpl:text-center tpl:text-xs tpl:border-[var(--tpl-danger)] tpl:text-[var(--tpl-text-muted)]\"\n >\n {{ t.errors.editorLoadFailed }}\n <button\n class=\"tpl:ml-1 tpl:cursor-pointer tpl:border-none tpl:bg-transparent tpl:p-0 tpl:underline tpl:text-[var(--tpl-primary)]\"\n @click=\"emit('retry')\"\n >\n {{ t.errors.retry }}\n </button>\n </div>\n <component\n :is=\"editorContent\"\n v-else-if=\"editorContent && editor\"\n :editor=\"editor as Editor\"\n class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:border-[var(--tpl-primary)] tpl:p-2\"\n />\n</template>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"RichTextEditorContent-C2q8sbp2.js","names":[],"sources":["../../../src/components/blocks/RichTextLinkDialog.vue","../../../src/components/blocks/RichTextLinkDialog.vue","../../../src/components/blocks/RichTextEditorContent.vue","../../../src/components/blocks/RichTextEditorContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables/useI18n\";\nimport { X } from \"@lucide/vue\";\nimport { inject } from \"vue\";\nimport { THEME_STYLES_KEY, UI_THEME_KEY } from \"../../keys\";\n\ndefineProps<{\n visible: boolean;\n isEditingLink: boolean;\n}>();\n\nconst linkUrl = defineModel<string>(\"linkUrl\", { required: true });\nconst dialogRef = defineModel<HTMLElement | null>(\"dialogRef\", {\n required: true,\n});\n\nconst emit = defineEmits<{\n (e: \"close\"): void;\n (e: \"insert\"): void;\n (e: \"remove\"): void;\n (e: \"keydown\", event: KeyboardEvent): void;\n}>();\n\nconst themeStyles = inject(THEME_STYLES_KEY, null);\nconst tplUiTheme = inject(UI_THEME_KEY, null);\n\nconst { t } = useI18n();\n</script>\n\n<template>\n <Teleport to=\"body\">\n <div\n v-if=\"visible\"\n :data-tpl-theme=\"tplUiTheme\"\n class=\"tpl tpl-link-dialog tpl:fixed tpl:inset-0 tpl:z-modal tpl:flex tpl:items-center tpl:justify-center\"\n :style=\"themeStyles\"\n @click.self=\"emit('close')\"\n >\n <div\n :ref=\"(el) => (dialogRef = el as HTMLElement | null)\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"tpl-link-dialog-title\"\n class=\"tpl:w-[400px] tpl:overflow-hidden tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:shadow-lg\"\n >\n <div\n class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-5 tpl:py-4\"\n >\n <h4\n id=\"tpl-link-dialog-title\"\n class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n {{\n isEditingLink ? t.linkDialog.editLink : t.linkDialog.insertLink\n }}\n </h4>\n <button\n type=\"button\"\n :aria-label=\"t.linkDialog.cancel\"\n class=\"tpl:flex tpl:size-7 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:border-none tpl:bg-transparent tpl:p-0 tpl:text-[var(--tpl-text-muted)] tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]\"\n @click=\"emit('close')\"\n >\n <X :size=\"16\" :stroke-width=\"2\" />\n </button>\n </div>\n <div class=\"tpl:p-5\">\n <div class=\"tpl:mb-4 tpl:last:mb-0\">\n <label\n for=\"tpl-link-dialog-url\"\n class=\"tpl:mb-1.5 tpl:block tpl:text-xs tpl:font-medium tpl:tracking-wide tpl:text-[var(--tpl-text-muted)] tpl:uppercase\"\n >{{ t.linkDialog.urlLabel }}</label\n >\n <input\n id=\"tpl-link-dialog-url\"\n v-model=\"linkUrl\"\n type=\"url\"\n class=\"tpl:w-full tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2.5 tpl:text-sm tpl:text-[var(--tpl-text)] tpl:transition-all tpl:duration-150 tpl:outline-none tpl:placeholder:text-[var(--tpl-text-dim)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[0_0_0_3px_var(--tpl-primary-light)]\"\n :placeholder=\"t.linkDialog.urlPlaceholder\"\n autofocus\n @keydown=\"emit('keydown', $event)\"\n />\n </div>\n </div>\n <div\n class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:px-5 tpl:py-4\"\n >\n <button\n v-if=\"isEditingLink\"\n type=\"button\"\n class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-danger)] tpl:bg-transparent tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:text-[var(--tpl-danger)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-danger-light)]\"\n @click=\"emit('remove')\"\n >\n {{ t.linkDialog.removeLink }}\n </button>\n <div class=\"tpl:ml-auto tpl:flex tpl:gap-2\">\n <button\n type=\"button\"\n class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-transparent tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]\"\n @click=\"emit('close')\"\n >\n {{ t.linkDialog.cancel }}\n </button>\n <button\n type=\"button\"\n class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border-none tpl:bg-[var(--tpl-primary)] tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-primary-hover)] tpl:text-[var(--tpl-bg)]\"\n @click=\"emit('insert')\"\n >\n {{\n isEditingLink\n ? t.linkDialog.updateLink\n : t.linkDialog.insertLink\n }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </Teleport>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables/useI18n\";\nimport { X } from \"@lucide/vue\";\nimport { inject } from \"vue\";\nimport { THEME_STYLES_KEY, UI_THEME_KEY } from \"../../keys\";\n\ndefineProps<{\n visible: boolean;\n isEditingLink: boolean;\n}>();\n\nconst linkUrl = defineModel<string>(\"linkUrl\", { required: true });\nconst dialogRef = defineModel<HTMLElement | null>(\"dialogRef\", {\n required: true,\n});\n\nconst emit = defineEmits<{\n (e: \"close\"): void;\n (e: \"insert\"): void;\n (e: \"remove\"): void;\n (e: \"keydown\", event: KeyboardEvent): void;\n}>();\n\nconst themeStyles = inject(THEME_STYLES_KEY, null);\nconst tplUiTheme = inject(UI_THEME_KEY, null);\n\nconst { t } = useI18n();\n</script>\n\n<template>\n <Teleport to=\"body\">\n <div\n v-if=\"visible\"\n :data-tpl-theme=\"tplUiTheme\"\n class=\"tpl tpl-link-dialog tpl:fixed tpl:inset-0 tpl:z-modal tpl:flex tpl:items-center tpl:justify-center\"\n :style=\"themeStyles\"\n @click.self=\"emit('close')\"\n >\n <div\n :ref=\"(el) => (dialogRef = el as HTMLElement | null)\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"tpl-link-dialog-title\"\n class=\"tpl:w-[400px] tpl:overflow-hidden tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:shadow-lg\"\n >\n <div\n class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-5 tpl:py-4\"\n >\n <h4\n id=\"tpl-link-dialog-title\"\n class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n {{\n isEditingLink ? t.linkDialog.editLink : t.linkDialog.insertLink\n }}\n </h4>\n <button\n type=\"button\"\n :aria-label=\"t.linkDialog.cancel\"\n class=\"tpl:flex tpl:size-7 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:border-none tpl:bg-transparent tpl:p-0 tpl:text-[var(--tpl-text-muted)] tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]\"\n @click=\"emit('close')\"\n >\n <X :size=\"16\" :stroke-width=\"2\" />\n </button>\n </div>\n <div class=\"tpl:p-5\">\n <div class=\"tpl:mb-4 tpl:last:mb-0\">\n <label\n for=\"tpl-link-dialog-url\"\n class=\"tpl:mb-1.5 tpl:block tpl:text-xs tpl:font-medium tpl:tracking-wide tpl:text-[var(--tpl-text-muted)] tpl:uppercase\"\n >{{ t.linkDialog.urlLabel }}</label\n >\n <input\n id=\"tpl-link-dialog-url\"\n v-model=\"linkUrl\"\n type=\"url\"\n class=\"tpl:w-full tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2.5 tpl:text-sm tpl:text-[var(--tpl-text)] tpl:transition-all tpl:duration-150 tpl:outline-none tpl:placeholder:text-[var(--tpl-text-dim)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[0_0_0_3px_var(--tpl-primary-light)]\"\n :placeholder=\"t.linkDialog.urlPlaceholder\"\n autofocus\n @keydown=\"emit('keydown', $event)\"\n />\n </div>\n </div>\n <div\n class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:px-5 tpl:py-4\"\n >\n <button\n v-if=\"isEditingLink\"\n type=\"button\"\n class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-danger)] tpl:bg-transparent tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:text-[var(--tpl-danger)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-danger-light)]\"\n @click=\"emit('remove')\"\n >\n {{ t.linkDialog.removeLink }}\n </button>\n <div class=\"tpl:ml-auto tpl:flex tpl:gap-2\">\n <button\n type=\"button\"\n class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-transparent tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]\"\n @click=\"emit('close')\"\n >\n {{ t.linkDialog.cancel }}\n </button>\n <button\n type=\"button\"\n class=\"tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border-none tpl:bg-[var(--tpl-primary)] tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-primary-hover)] tpl:text-[var(--tpl-bg)]\"\n @click=\"emit('insert')\"\n >\n {{\n isEditingLink\n ? t.linkDialog.updateLink\n : t.linkDialog.insertLink\n }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </Teleport>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables/useI18n\";\nimport type { Editor } from \"@tiptap/vue-3\";\nimport type { Component } from \"vue\";\n\ndefineProps<{\n editor: Editor | null;\n editorContent: Component | null;\n isLoading: boolean;\n initError: string | null;\n}>();\n\nconst emit = defineEmits<{\n (e: \"retry\"): void;\n}>();\n\nconst { t } = useI18n();\n</script>\n\n<template>\n <div\n v-if=\"isLoading\"\n class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:border-[var(--tpl-primary)] tpl:p-2\"\n >\n <div class=\"tpl:animate-pulse tpl:text-[var(--tpl-text-dim)]\">\n {{ t.errors.editorLoading }}\n </div>\n </div>\n <div\n v-else-if=\"initError\"\n class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:p-2 tpl:text-center tpl:text-xs tpl:border-[var(--tpl-danger)] tpl:text-[var(--tpl-text-muted)]\"\n >\n {{ t.errors.editorLoadFailed }}\n <button\n class=\"tpl:ml-1 tpl:cursor-pointer tpl:border-none tpl:bg-transparent tpl:p-0 tpl:underline tpl:text-[var(--tpl-primary)]\"\n @click=\"emit('retry')\"\n >\n {{ t.errors.retry }}\n </button>\n </div>\n <component\n :is=\"editorContent\"\n v-else-if=\"editorContent && editor\"\n :editor=\"editor as Editor\"\n class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:border-[var(--tpl-primary)] tpl:p-2\"\n />\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables/useI18n\";\nimport type { Editor } from \"@tiptap/vue-3\";\nimport type { Component } from \"vue\";\n\ndefineProps<{\n editor: Editor | null;\n editorContent: Component | null;\n isLoading: boolean;\n initError: string | null;\n}>();\n\nconst emit = defineEmits<{\n (e: \"retry\"): void;\n}>();\n\nconst { t } = useI18n();\n</script>\n\n<template>\n <div\n v-if=\"isLoading\"\n class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:border-[var(--tpl-primary)] tpl:p-2\"\n >\n <div class=\"tpl:animate-pulse tpl:text-[var(--tpl-text-dim)]\">\n {{ t.errors.editorLoading }}\n </div>\n </div>\n <div\n v-else-if=\"initError\"\n class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:p-2 tpl:text-center tpl:text-xs tpl:border-[var(--tpl-danger)] tpl:text-[var(--tpl-text-muted)]\"\n >\n {{ t.errors.editorLoadFailed }}\n <button\n class=\"tpl:ml-1 tpl:cursor-pointer tpl:border-none tpl:bg-transparent tpl:p-0 tpl:underline tpl:text-[var(--tpl-primary)]\"\n @click=\"emit('retry')\"\n >\n {{ t.errors.retry }}\n </button>\n </div>\n <component\n :is=\"editorContent\"\n v-else-if=\"editorContent && editor\"\n :editor=\"editor as Editor\"\n class=\"tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:border-[var(--tpl-primary)] tpl:p-2\"\n />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAWA,IAAM,IAAU,EAAmB,GAAC,UAA8B,EAC5D,IAAY,EAA+B,GAAC,YAEhD,EAEI,IAAO,GAOP,IAAc,EAAO,GAAkB,KAAK,EAC5C,IAAa,EAAO,GAAc,KAAK,EAEvC,EAAE,SAAM,GAAS;yBAIrB,EAuFW,GAAA,EAvFD,IAAG,QAAM,EAAA,CAET,EAAA,WAAA,GAAA,EADR,EAqFM,OAAA;;GAnFH,kBAAgB,EAAA,EAAU;GAC3B,OAAM;GACL,OAAK,EAAE,EAAA,EAAW,CAAA;GAClB,SAAK,AAAA,EAAA,OAAA,GAAA,MAAO,EAAI,QAAA,EAAA,CAAA,OAAA,CAAA;MAEjB,EA6EM,OAAA;GA5EH,MAAM,MAAQ,EAAA,QAAY;GAC3B,MAAK;GACL,cAAW;GACX,mBAAgB;GAChB,OAAM;;GAEN,EAmBM,OAnBN,GAmBM,CAhBJ,EAOK,MAPL,GAOK,EAFD,EAAA,gBAAgB,EAAA,EAAC,CAAC,WAAW,WAAW,EAAA,EAAC,CAAC,WAAW,WAAU,EAAA,EAAA,EAGnE,EAOS,UAAA;IANP,MAAK;IACJ,cAAY,EAAA,EAAC,CAAC,WAAW;IAC1B,OAAM;IACL,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,QAAA;OAEZ,EAAkC,EAAA,EAAA,EAAA;IAA9B,MAAM;IAAK,gBAAc;;GAGjC,EAiBM,OAjBN,GAiBM,CAhBJ,EAeM,OAfN,GAeM,CAdJ,EAIC,SAJD,GAIC,EADK,EAAA,EAAC,CAAC,WAAW,SAAQ,EAAA,EAAA,EAAA,EAE3B,EAQE,SAAA;IAPA,IAAG;6CACa,QAAA;IAChB,MAAK;IACL,OAAM;IACL,aAAa,EAAA,EAAC,CAAC,WAAW;IAC3B,WAAA;IACC,WAAO,AAAA,EAAA,QAAA,MAAE,EAAI,WAAY,EAAM;yBALvB,EAAA,MAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;GAStB,EA+BM,OA/BN,GA+BM,CA3BI,EAAA,iBAAA,GAAA,EADR,EAOS,UAAA;;IALP,MAAK;IACL,OAAM;IACL,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,SAAA;QAET,EAAA,EAAC,CAAC,WAAW,WAAU,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAE5B,EAmBM,OAnBN,GAmBM,CAlBJ,EAMS,UAAA;IALP,MAAK;IACL,OAAM;IACL,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,QAAA;QAET,EAAA,EAAC,CAAC,WAAW,OAAM,EAAA,EAAA,EAExB,EAUS,UAAA;IATP,MAAK;IACL,OAAM;IACL,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,SAAA;QAGV,EAAA,gBAAkC,EAAA,EAAC,CAAC,WAAW,aAA+B,EAAA,EAAC,CAAC,WAAW,WAAU,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;EEhGrH,IAAM,IAAO,GAIP,EAAE,SAAM,GAAS;mBAKb,EAAA,aAAA,GAAA,EADR,EAOM,OAPN,GAOM,CAHJ,EAEM,OAFN,GAEM,EADD,EAAA,EAAC,CAAC,OAAO,cAAa,EAAA,EAAA,CAAA,CAAA,IAIhB,EAAA,aAAA,GAAA,EADb,EAWM,OAXN,GAWM,CAAA,EAAA,EAPD,EAAA,EAAC,CAAC,OAAO,iBAAgB,GAAG,KAC/B,EAAA,EAAA,EAKS,UAAA;GAJP,OAAM;GACL,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,QAAA;OAET,EAAA,EAAC,CAAC,OAAO,MAAK,EAAA,EAAA,CAAA,CAAA,IAKR,EAAA,iBAAiB,EAAA,UAAA,GAAA,EAF9B,EAKE,EAJK,EAAA,cAAa,EAAA;;GAEjB,QAAQ,EAAA;GACT,OAAM"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { C as e, G as t, H as n, I as r, P as i, W as a, _ as o, b as s, c, ct as l, dt as u, f as d, ft as f, g as p, h as m, m as h, tt as g, ut as _, v, x as y } from "./draggable-C-1_gch3.js";
|
|
2
|
-
import {
|
|
2
|
+
import { $t as b, Bt as x, St as ee, i as te, on as ne, rt as S, un as C } from "./features-BrvE2Fzv.js";
|
|
3
3
|
//#region src/cloud/components/SaveModuleDialog.vue?vue&type=script&setup=true&lang.ts
|
|
4
4
|
var w = ["aria-busy"], T = {
|
|
5
5
|
id: "tpl-save-module-title",
|
|
@@ -23,7 +23,7 @@ var w = ["aria-busy"], T = {
|
|
|
23
23
|
},
|
|
24
24
|
emits: ["close", "saved"],
|
|
25
25
|
setup(e, { emit: R }) {
|
|
26
|
-
let z = e, B = R, { t: V } =
|
|
26
|
+
let z = e, B = R, { t: V } = x(), { t: H } = S(), U = C(b, "SaveModuleDialog"), W = C(ne, "SaveModuleDialog"), G = g(""), K = g(/* @__PURE__ */ new Set()), q = g(!1), J = g(null), Y = h(() => U.content.value.blocks);
|
|
27
27
|
function X(e, t) {
|
|
28
28
|
return `${V.blocks[e.type] ?? e.type} ${t + 1}`;
|
|
29
29
|
}
|
|
@@ -103,7 +103,7 @@ var w = ["aria-busy"], T = {
|
|
|
103
103
|
class: "tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]",
|
|
104
104
|
disabled: !Z.value,
|
|
105
105
|
onClick: Q
|
|
106
|
-
}, [q.value ? (i(), v("span", re, [y(l(
|
|
106
|
+
}, [q.value ? (i(), v("span", re, [y(l(ee), {
|
|
107
107
|
class: "tpl:animate-spin",
|
|
108
108
|
size: 12,
|
|
109
109
|
"stroke-width": 2
|
|
@@ -116,4 +116,4 @@ var w = ["aria-busy"], T = {
|
|
|
116
116
|
//#endregion
|
|
117
117
|
export { R as default };
|
|
118
118
|
|
|
119
|
-
//# sourceMappingURL=SaveModuleDialog-
|
|
119
|
+
//# sourceMappingURL=SaveModuleDialog-BNxh1jPT.js.map
|
package/dist/cdn/chunks/{SaveModuleDialog-AwL0tkCV.js.map → SaveModuleDialog-BNxh1jPT.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SaveModuleDialog-AwL0tkCV.js","names":[],"sources":["../../../src/cloud/components/SaveModuleDialog.vue","../../../src/cloud/components/SaveModuleDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../../composables\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport {\n EDITOR_KEY,\n SAVED_MODULES_HEADLESS_KEY,\n requireInject,\n} from \"../../keys\";\nimport type { Block } from \"@aswin.dev/types\";\nimport { LoaderCircle } from \"@lucide/vue\";\nimport { computed, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n visible: boolean;\n preSelectedBlockId: string | null;\n}>();\n\nconst emit = defineEmits<{\n (e: \"close\"): void;\n (e: \"saved\"): void;\n}>();\n\nconst { t } = useI18n();\nconst { t: cloudT } = useCloudI18nStrict();\nconst editor = requireInject(EDITOR_KEY, \"SaveModuleDialog\");\nconst savedModules = requireInject(\n SAVED_MODULES_HEADLESS_KEY,\n \"SaveModuleDialog\",\n);\n\nconst moduleName = ref(\"\");\nconst selectedBlockIds = ref<Set<string>>(new Set());\nconst isSaving = ref(false);\nconst error = ref<string | null>(null);\n\nconst topLevelBlocks = computed(() => editor.content.value.blocks);\n\nfunction blockLabel(block: Block, index: number): string {\n const typeKey = block.type as keyof typeof t.blocks;\n const label = t.blocks[typeKey] ?? block.type;\n return `${label} ${index + 1}`;\n}\n\nwatch(\n () => props.visible,\n (visible) => {\n if (visible) {\n moduleName.value = \"\";\n error.value = null;\n selectedBlockIds.value = new Set(\n props.preSelectedBlockId ? [props.preSelectedBlockId] : [],\n );\n }\n },\n);\n\nfunction toggleBlock(blockId: string): void {\n const newSet = new Set(selectedBlockIds.value);\n if (newSet.has(blockId)) {\n newSet.delete(blockId);\n } else {\n newSet.add(blockId);\n }\n selectedBlockIds.value = newSet;\n}\n\nconst canSave = computed(\n () =>\n moduleName.value.trim().length > 0 &&\n selectedBlockIds.value.size > 0 &&\n !isSaving.value,\n);\n\nasync function handleSave(): Promise<void> {\n if (!canSave.value) return;\n\n isSaving.value = true;\n error.value = null;\n\n try {\n const selectedBlocks = topLevelBlocks.value.filter((b) =>\n selectedBlockIds.value.has(b.id),\n );\n await savedModules.createModule(moduleName.value.trim(), selectedBlocks);\n emit(\"saved\");\n emit(\"close\");\n } catch (err) {\n error.value = (err as Error).message;\n } finally {\n isSaving.value = false;\n }\n}\n\nfunction handleClose(): void {\n if (!isSaving.value) {\n emit(\"close\");\n }\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n if (event.key === \"Enter\" && !event.shiftKey) {\n event.preventDefault();\n handleSave();\n }\n if (event.key === \"Escape\") {\n handleClose();\n }\n}\n</script>\n\n<template>\n <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n <div\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-busy=\"isSaving\"\n aria-labelledby=\"tpl-save-module-title\"\n class=\"tpl-scale-in tpl:mx-4 tpl:w-full tpl:max-w-sm tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n style=\"\n background-color: var(--tpl-bg-elevated);\n box-shadow: var(--tpl-shadow-xl);\n \"\n >\n <h3\n id=\"tpl-save-module-title\"\n class=\"tpl:mb-4 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n {{ cloudT.modules.saveAsModule }}\n </h3>\n\n <!-- Module name -->\n <div class=\"tpl:mb-3\">\n <label\n class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n >\n {{ cloudT.modules.moduleName }}\n </label>\n <input\n v-model=\"moduleName\"\n type=\"text\"\n :placeholder=\"cloudT.modules.moduleNamePlaceholder\"\n class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n :disabled=\"isSaving\"\n />\n </div>\n\n <!-- Block selection -->\n <div class=\"tpl:mb-3\">\n <label\n class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n >\n {{ cloudT.modules.selectBlocks }}\n </label>\n <div\n class=\"tpl:max-h-40 tpl:space-y-1 tpl:overflow-y-auto tpl:rounded-md tpl:border tpl:p-2 tpl:border-[var(--tpl-border)]\"\n >\n <label\n v-for=\"(block, index) in topLevelBlocks\"\n :key=\"block.id\"\n class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:rounded-sm tpl:px-2 tpl:py-1.5 tpl:text-sm tpl:transition-colors tpl:duration-100\"\n :style=\"{\n color: 'var(--tpl-text)',\n backgroundColor: selectedBlockIds.has(block.id)\n ? 'var(--tpl-primary-light)'\n : 'transparent',\n }\"\n >\n <input\n type=\"checkbox\"\n :checked=\"selectedBlockIds.has(block.id)\"\n class=\"tpl:accent-[var(--tpl-primary)]\"\n :disabled=\"isSaving\"\n @change=\"toggleBlock(block.id)\"\n />\n {{ blockLabel(block, index) }}\n </label>\n </div>\n </div>\n\n <!-- Error message -->\n <p\n v-if=\"error\"\n role=\"alert\"\n class=\"tpl:mb-3 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n >\n {{ error }}\n </p>\n\n <!-- Actions -->\n <div class=\"tpl:flex tpl:justify-end tpl:gap-2\">\n <button\n type=\"button\"\n class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n :disabled=\"isSaving\"\n :class=\"{\n 'tpl:cursor-not-allowed tpl:opacity-50': isSaving,\n }\"\n @click=\"handleClose\"\n >\n {{ cloudT.modules.cancel }}\n </button>\n <button\n type=\"button\"\n class=\"tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n :disabled=\"!canSave\"\n @click=\"handleSave\"\n >\n <span v-if=\"isSaving\" class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n <LoaderCircle\n class=\"tpl:animate-spin\"\n :size=\"12\"\n :stroke-width=\"2\"\n />\n {{ cloudT.modules.saving }}\n </span>\n <span v-else>\n {{ cloudT.modules.save }}\n </span>\n </button>\n </div>\n </div>\n </TplModal>\n</template>\n","<script setup lang=\"ts\">\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../../composables\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport {\n EDITOR_KEY,\n SAVED_MODULES_HEADLESS_KEY,\n requireInject,\n} from \"../../keys\";\nimport type { Block } from \"@aswin.dev/types\";\nimport { LoaderCircle } from \"@lucide/vue\";\nimport { computed, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n visible: boolean;\n preSelectedBlockId: string | null;\n}>();\n\nconst emit = defineEmits<{\n (e: \"close\"): void;\n (e: \"saved\"): void;\n}>();\n\nconst { t } = useI18n();\nconst { t: cloudT } = useCloudI18nStrict();\nconst editor = requireInject(EDITOR_KEY, \"SaveModuleDialog\");\nconst savedModules = requireInject(\n SAVED_MODULES_HEADLESS_KEY,\n \"SaveModuleDialog\",\n);\n\nconst moduleName = ref(\"\");\nconst selectedBlockIds = ref<Set<string>>(new Set());\nconst isSaving = ref(false);\nconst error = ref<string | null>(null);\n\nconst topLevelBlocks = computed(() => editor.content.value.blocks);\n\nfunction blockLabel(block: Block, index: number): string {\n const typeKey = block.type as keyof typeof t.blocks;\n const label = t.blocks[typeKey] ?? block.type;\n return `${label} ${index + 1}`;\n}\n\nwatch(\n () => props.visible,\n (visible) => {\n if (visible) {\n moduleName.value = \"\";\n error.value = null;\n selectedBlockIds.value = new Set(\n props.preSelectedBlockId ? [props.preSelectedBlockId] : [],\n );\n }\n },\n);\n\nfunction toggleBlock(blockId: string): void {\n const newSet = new Set(selectedBlockIds.value);\n if (newSet.has(blockId)) {\n newSet.delete(blockId);\n } else {\n newSet.add(blockId);\n }\n selectedBlockIds.value = newSet;\n}\n\nconst canSave = computed(\n () =>\n moduleName.value.trim().length > 0 &&\n selectedBlockIds.value.size > 0 &&\n !isSaving.value,\n);\n\nasync function handleSave(): Promise<void> {\n if (!canSave.value) return;\n\n isSaving.value = true;\n error.value = null;\n\n try {\n const selectedBlocks = topLevelBlocks.value.filter((b) =>\n selectedBlockIds.value.has(b.id),\n );\n await savedModules.createModule(moduleName.value.trim(), selectedBlocks);\n emit(\"saved\");\n emit(\"close\");\n } catch (err) {\n error.value = (err as Error).message;\n } finally {\n isSaving.value = false;\n }\n}\n\nfunction handleClose(): void {\n if (!isSaving.value) {\n emit(\"close\");\n }\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n if (event.key === \"Enter\" && !event.shiftKey) {\n event.preventDefault();\n handleSave();\n }\n if (event.key === \"Escape\") {\n handleClose();\n }\n}\n</script>\n\n<template>\n <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n <div\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-busy=\"isSaving\"\n aria-labelledby=\"tpl-save-module-title\"\n class=\"tpl-scale-in tpl:mx-4 tpl:w-full tpl:max-w-sm tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n style=\"\n background-color: var(--tpl-bg-elevated);\n box-shadow: var(--tpl-shadow-xl);\n \"\n >\n <h3\n id=\"tpl-save-module-title\"\n class=\"tpl:mb-4 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n {{ cloudT.modules.saveAsModule }}\n </h3>\n\n <!-- Module name -->\n <div class=\"tpl:mb-3\">\n <label\n class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n >\n {{ cloudT.modules.moduleName }}\n </label>\n <input\n v-model=\"moduleName\"\n type=\"text\"\n :placeholder=\"cloudT.modules.moduleNamePlaceholder\"\n class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n :disabled=\"isSaving\"\n />\n </div>\n\n <!-- Block selection -->\n <div class=\"tpl:mb-3\">\n <label\n class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n >\n {{ cloudT.modules.selectBlocks }}\n </label>\n <div\n class=\"tpl:max-h-40 tpl:space-y-1 tpl:overflow-y-auto tpl:rounded-md tpl:border tpl:p-2 tpl:border-[var(--tpl-border)]\"\n >\n <label\n v-for=\"(block, index) in topLevelBlocks\"\n :key=\"block.id\"\n class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:rounded-sm tpl:px-2 tpl:py-1.5 tpl:text-sm tpl:transition-colors tpl:duration-100\"\n :style=\"{\n color: 'var(--tpl-text)',\n backgroundColor: selectedBlockIds.has(block.id)\n ? 'var(--tpl-primary-light)'\n : 'transparent',\n }\"\n >\n <input\n type=\"checkbox\"\n :checked=\"selectedBlockIds.has(block.id)\"\n class=\"tpl:accent-[var(--tpl-primary)]\"\n :disabled=\"isSaving\"\n @change=\"toggleBlock(block.id)\"\n />\n {{ blockLabel(block, index) }}\n </label>\n </div>\n </div>\n\n <!-- Error message -->\n <p\n v-if=\"error\"\n role=\"alert\"\n class=\"tpl:mb-3 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n >\n {{ error }}\n </p>\n\n <!-- Actions -->\n <div class=\"tpl:flex tpl:justify-end tpl:gap-2\">\n <button\n type=\"button\"\n class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n :disabled=\"isSaving\"\n :class=\"{\n 'tpl:cursor-not-allowed tpl:opacity-50': isSaving,\n }\"\n @click=\"handleClose\"\n >\n {{ cloudT.modules.cancel }}\n </button>\n <button\n type=\"button\"\n class=\"tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n :disabled=\"!canSave\"\n @click=\"handleSave\"\n >\n <span v-if=\"isSaving\" class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n <LoaderCircle\n class=\"tpl:animate-spin\"\n :size=\"12\"\n :stroke-width=\"2\"\n />\n {{ cloudT.modules.saving }}\n </span>\n <span v-else>\n {{ cloudT.modules.save }}\n </span>\n </button>\n </div>\n </div>\n </TplModal>\n</template>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SaveModuleDialog-BNxh1jPT.js","names":[],"sources":["../../../src/cloud/components/SaveModuleDialog.vue","../../../src/cloud/components/SaveModuleDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../../composables\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport {\n EDITOR_KEY,\n SAVED_MODULES_HEADLESS_KEY,\n requireInject,\n} from \"../../keys\";\nimport type { Block } from \"@aswin.dev/types\";\nimport { LoaderCircle } from \"@lucide/vue\";\nimport { computed, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n visible: boolean;\n preSelectedBlockId: string | null;\n}>();\n\nconst emit = defineEmits<{\n (e: \"close\"): void;\n (e: \"saved\"): void;\n}>();\n\nconst { t } = useI18n();\nconst { t: cloudT } = useCloudI18nStrict();\nconst editor = requireInject(EDITOR_KEY, \"SaveModuleDialog\");\nconst savedModules = requireInject(\n SAVED_MODULES_HEADLESS_KEY,\n \"SaveModuleDialog\",\n);\n\nconst moduleName = ref(\"\");\nconst selectedBlockIds = ref<Set<string>>(new Set());\nconst isSaving = ref(false);\nconst error = ref<string | null>(null);\n\nconst topLevelBlocks = computed(() => editor.content.value.blocks);\n\nfunction blockLabel(block: Block, index: number): string {\n const typeKey = block.type as keyof typeof t.blocks;\n const label = t.blocks[typeKey] ?? block.type;\n return `${label} ${index + 1}`;\n}\n\nwatch(\n () => props.visible,\n (visible) => {\n if (visible) {\n moduleName.value = \"\";\n error.value = null;\n selectedBlockIds.value = new Set(\n props.preSelectedBlockId ? [props.preSelectedBlockId] : [],\n );\n }\n },\n);\n\nfunction toggleBlock(blockId: string): void {\n const newSet = new Set(selectedBlockIds.value);\n if (newSet.has(blockId)) {\n newSet.delete(blockId);\n } else {\n newSet.add(blockId);\n }\n selectedBlockIds.value = newSet;\n}\n\nconst canSave = computed(\n () =>\n moduleName.value.trim().length > 0 &&\n selectedBlockIds.value.size > 0 &&\n !isSaving.value,\n);\n\nasync function handleSave(): Promise<void> {\n if (!canSave.value) return;\n\n isSaving.value = true;\n error.value = null;\n\n try {\n const selectedBlocks = topLevelBlocks.value.filter((b) =>\n selectedBlockIds.value.has(b.id),\n );\n await savedModules.createModule(moduleName.value.trim(), selectedBlocks);\n emit(\"saved\");\n emit(\"close\");\n } catch (err) {\n error.value = (err as Error).message;\n } finally {\n isSaving.value = false;\n }\n}\n\nfunction handleClose(): void {\n if (!isSaving.value) {\n emit(\"close\");\n }\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n if (event.key === \"Enter\" && !event.shiftKey) {\n event.preventDefault();\n handleSave();\n }\n if (event.key === \"Escape\") {\n handleClose();\n }\n}\n</script>\n\n<template>\n <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n <div\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-busy=\"isSaving\"\n aria-labelledby=\"tpl-save-module-title\"\n class=\"tpl-scale-in tpl:mx-4 tpl:w-full tpl:max-w-sm tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n style=\"\n background-color: var(--tpl-bg-elevated);\n box-shadow: var(--tpl-shadow-xl);\n \"\n >\n <h3\n id=\"tpl-save-module-title\"\n class=\"tpl:mb-4 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n {{ cloudT.modules.saveAsModule }}\n </h3>\n\n <!-- Module name -->\n <div class=\"tpl:mb-3\">\n <label\n class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n >\n {{ cloudT.modules.moduleName }}\n </label>\n <input\n v-model=\"moduleName\"\n type=\"text\"\n :placeholder=\"cloudT.modules.moduleNamePlaceholder\"\n class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n :disabled=\"isSaving\"\n />\n </div>\n\n <!-- Block selection -->\n <div class=\"tpl:mb-3\">\n <label\n class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n >\n {{ cloudT.modules.selectBlocks }}\n </label>\n <div\n class=\"tpl:max-h-40 tpl:space-y-1 tpl:overflow-y-auto tpl:rounded-md tpl:border tpl:p-2 tpl:border-[var(--tpl-border)]\"\n >\n <label\n v-for=\"(block, index) in topLevelBlocks\"\n :key=\"block.id\"\n class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:rounded-sm tpl:px-2 tpl:py-1.5 tpl:text-sm tpl:transition-colors tpl:duration-100\"\n :style=\"{\n color: 'var(--tpl-text)',\n backgroundColor: selectedBlockIds.has(block.id)\n ? 'var(--tpl-primary-light)'\n : 'transparent',\n }\"\n >\n <input\n type=\"checkbox\"\n :checked=\"selectedBlockIds.has(block.id)\"\n class=\"tpl:accent-[var(--tpl-primary)]\"\n :disabled=\"isSaving\"\n @change=\"toggleBlock(block.id)\"\n />\n {{ blockLabel(block, index) }}\n </label>\n </div>\n </div>\n\n <!-- Error message -->\n <p\n v-if=\"error\"\n role=\"alert\"\n class=\"tpl:mb-3 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n >\n {{ error }}\n </p>\n\n <!-- Actions -->\n <div class=\"tpl:flex tpl:justify-end tpl:gap-2\">\n <button\n type=\"button\"\n class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n :disabled=\"isSaving\"\n :class=\"{\n 'tpl:cursor-not-allowed tpl:opacity-50': isSaving,\n }\"\n @click=\"handleClose\"\n >\n {{ cloudT.modules.cancel }}\n </button>\n <button\n type=\"button\"\n class=\"tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n :disabled=\"!canSave\"\n @click=\"handleSave\"\n >\n <span v-if=\"isSaving\" class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n <LoaderCircle\n class=\"tpl:animate-spin\"\n :size=\"12\"\n :stroke-width=\"2\"\n />\n {{ cloudT.modules.saving }}\n </span>\n <span v-else>\n {{ cloudT.modules.save }}\n </span>\n </button>\n </div>\n </div>\n </TplModal>\n</template>\n","<script setup lang=\"ts\">\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../../composables\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport {\n EDITOR_KEY,\n SAVED_MODULES_HEADLESS_KEY,\n requireInject,\n} from \"../../keys\";\nimport type { Block } from \"@aswin.dev/types\";\nimport { LoaderCircle } from \"@lucide/vue\";\nimport { computed, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n visible: boolean;\n preSelectedBlockId: string | null;\n}>();\n\nconst emit = defineEmits<{\n (e: \"close\"): void;\n (e: \"saved\"): void;\n}>();\n\nconst { t } = useI18n();\nconst { t: cloudT } = useCloudI18nStrict();\nconst editor = requireInject(EDITOR_KEY, \"SaveModuleDialog\");\nconst savedModules = requireInject(\n SAVED_MODULES_HEADLESS_KEY,\n \"SaveModuleDialog\",\n);\n\nconst moduleName = ref(\"\");\nconst selectedBlockIds = ref<Set<string>>(new Set());\nconst isSaving = ref(false);\nconst error = ref<string | null>(null);\n\nconst topLevelBlocks = computed(() => editor.content.value.blocks);\n\nfunction blockLabel(block: Block, index: number): string {\n const typeKey = block.type as keyof typeof t.blocks;\n const label = t.blocks[typeKey] ?? block.type;\n return `${label} ${index + 1}`;\n}\n\nwatch(\n () => props.visible,\n (visible) => {\n if (visible) {\n moduleName.value = \"\";\n error.value = null;\n selectedBlockIds.value = new Set(\n props.preSelectedBlockId ? [props.preSelectedBlockId] : [],\n );\n }\n },\n);\n\nfunction toggleBlock(blockId: string): void {\n const newSet = new Set(selectedBlockIds.value);\n if (newSet.has(blockId)) {\n newSet.delete(blockId);\n } else {\n newSet.add(blockId);\n }\n selectedBlockIds.value = newSet;\n}\n\nconst canSave = computed(\n () =>\n moduleName.value.trim().length > 0 &&\n selectedBlockIds.value.size > 0 &&\n !isSaving.value,\n);\n\nasync function handleSave(): Promise<void> {\n if (!canSave.value) return;\n\n isSaving.value = true;\n error.value = null;\n\n try {\n const selectedBlocks = topLevelBlocks.value.filter((b) =>\n selectedBlockIds.value.has(b.id),\n );\n await savedModules.createModule(moduleName.value.trim(), selectedBlocks);\n emit(\"saved\");\n emit(\"close\");\n } catch (err) {\n error.value = (err as Error).message;\n } finally {\n isSaving.value = false;\n }\n}\n\nfunction handleClose(): void {\n if (!isSaving.value) {\n emit(\"close\");\n }\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n if (event.key === \"Enter\" && !event.shiftKey) {\n event.preventDefault();\n handleSave();\n }\n if (event.key === \"Escape\") {\n handleClose();\n }\n}\n</script>\n\n<template>\n <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n <div\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-busy=\"isSaving\"\n aria-labelledby=\"tpl-save-module-title\"\n class=\"tpl-scale-in tpl:mx-4 tpl:w-full tpl:max-w-sm tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n style=\"\n background-color: var(--tpl-bg-elevated);\n box-shadow: var(--tpl-shadow-xl);\n \"\n >\n <h3\n id=\"tpl-save-module-title\"\n class=\"tpl:mb-4 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n {{ cloudT.modules.saveAsModule }}\n </h3>\n\n <!-- Module name -->\n <div class=\"tpl:mb-3\">\n <label\n class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n >\n {{ cloudT.modules.moduleName }}\n </label>\n <input\n v-model=\"moduleName\"\n type=\"text\"\n :placeholder=\"cloudT.modules.moduleNamePlaceholder\"\n class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n :disabled=\"isSaving\"\n />\n </div>\n\n <!-- Block selection -->\n <div class=\"tpl:mb-3\">\n <label\n class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n >\n {{ cloudT.modules.selectBlocks }}\n </label>\n <div\n class=\"tpl:max-h-40 tpl:space-y-1 tpl:overflow-y-auto tpl:rounded-md tpl:border tpl:p-2 tpl:border-[var(--tpl-border)]\"\n >\n <label\n v-for=\"(block, index) in topLevelBlocks\"\n :key=\"block.id\"\n class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:rounded-sm tpl:px-2 tpl:py-1.5 tpl:text-sm tpl:transition-colors tpl:duration-100\"\n :style=\"{\n color: 'var(--tpl-text)',\n backgroundColor: selectedBlockIds.has(block.id)\n ? 'var(--tpl-primary-light)'\n : 'transparent',\n }\"\n >\n <input\n type=\"checkbox\"\n :checked=\"selectedBlockIds.has(block.id)\"\n class=\"tpl:accent-[var(--tpl-primary)]\"\n :disabled=\"isSaving\"\n @change=\"toggleBlock(block.id)\"\n />\n {{ blockLabel(block, index) }}\n </label>\n </div>\n </div>\n\n <!-- Error message -->\n <p\n v-if=\"error\"\n role=\"alert\"\n class=\"tpl:mb-3 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n >\n {{ error }}\n </p>\n\n <!-- Actions -->\n <div class=\"tpl:flex tpl:justify-end tpl:gap-2\">\n <button\n type=\"button\"\n class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n :disabled=\"isSaving\"\n :class=\"{\n 'tpl:cursor-not-allowed tpl:opacity-50': isSaving,\n }\"\n @click=\"handleClose\"\n >\n {{ cloudT.modules.cancel }}\n </button>\n <button\n type=\"button\"\n class=\"tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n :disabled=\"!canSave\"\n @click=\"handleSave\"\n >\n <span v-if=\"isSaving\" class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n <LoaderCircle\n class=\"tpl:animate-spin\"\n :size=\"12\"\n :stroke-width=\"2\"\n />\n {{ cloudT.modules.saving }}\n </span>\n <span v-else>\n {{ cloudT.modules.save }}\n </span>\n </button>\n </div>\n </div>\n </TplModal>\n</template>\n"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { C as e, D as t, P as n, X as r, _ as i, b as a, ct as o, dt as s, f as c, ft as l, g as u, h as d, p as f, ut as p, v as m, x as h } from "./draggable-C-1_gch3.js";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import { n as T, t as E } from "./RichTextEditorContent-
|
|
2
|
+
import { Bt as g, St as _, Z as v, cn as y, ln as b } from "./features-BrvE2Fzv.js";
|
|
3
|
+
import { Q as x, Y as S, dt as C, w } from "./icons-C7wtAD8p.js";
|
|
4
|
+
import { n as T, t as E } from "./RichTextEditorContent-C2q8sbp2.js";
|
|
5
5
|
//#region src/components/blocks/TitleEditor.vue?vue&type=script&setup=true&lang.ts
|
|
6
6
|
var ee = { class: "tpl-text-editor-wrapper tpl:relative" }, D = ["data-tpl-theme", "aria-label"], O = ["aria-label", "title"], k = ["aria-label", "title"], A = ["aria-label", "title"], j = {
|
|
7
7
|
key: 0,
|
|
@@ -17,17 +17,17 @@ var ee = { class: "tpl-text-editor-wrapper tpl:relative" }, D = ["data-tpl-theme
|
|
|
17
17
|
},
|
|
18
18
|
emits: ["done"],
|
|
19
19
|
setup(e, { emit: P }) {
|
|
20
|
-
let F = e, I = P, L = t(
|
|
20
|
+
let F = e, I = P, L = t(y, null), R = t(b, null), { t: z } = g(), { editor: B, EditorContent: V, isLoading: H, initError: U, retry: W, showLinkDialog: G, linkUrl: K, linkDialogRef: q, canRequestMergeTag: J, openLinkDialog: Y, insertLink: X, removeLink: Z, closeLinkDialog: Q, handleLinkKeydown: te, handleAddMergeTag: $ } = v({
|
|
21
21
|
blockId: () => F.block.id,
|
|
22
22
|
blockContent: () => F.block.content,
|
|
23
23
|
onDone: () => I("done"),
|
|
24
24
|
editorName: "TitleEditor",
|
|
25
25
|
async loadExtensions({ mergeTags: e, syntax: t, triggerChar: n, autocompleteEnabled: r, suggestionEmptyText: i }) {
|
|
26
26
|
let [{ Editor: a, EditorContent: o }, { default: s }, { default: c }, { MergeTagNode: l, MergeTagSuggestion: u, LogicMergeTagNode: d }] = await Promise.all([
|
|
27
|
-
import("./tiptap-
|
|
28
|
-
import("./tiptap-
|
|
29
|
-
import("./tiptap-
|
|
30
|
-
import("./extensions-
|
|
27
|
+
import("./tiptap-D8whBv5F.js").then((e) => e.i),
|
|
28
|
+
import("./tiptap-D8whBv5F.js").then((e) => e.a),
|
|
29
|
+
import("./tiptap-D8whBv5F.js").then((e) => e.u),
|
|
30
|
+
import("./extensions-B0eT-yjf.js")
|
|
31
31
|
]);
|
|
32
32
|
return {
|
|
33
33
|
TiptapEditor: a,
|
|
@@ -83,7 +83,7 @@ var ee = { class: "tpl-text-editor-wrapper tpl:relative" }, D = ["data-tpl-theme
|
|
|
83
83
|
"aria-label": o(z).titleEditor.bold,
|
|
84
84
|
title: o(z).titleEditor.bold,
|
|
85
85
|
onClick: g[0] ||= (e) => o(B)?.chain().focus().toggleBold().run()
|
|
86
|
-
}, [h(o(
|
|
86
|
+
}, [h(o(C), {
|
|
87
87
|
size: 16,
|
|
88
88
|
"stroke-width": 2.5
|
|
89
89
|
})], 10, O),
|
|
@@ -93,7 +93,7 @@ var ee = { class: "tpl-text-editor-wrapper tpl:relative" }, D = ["data-tpl-theme
|
|
|
93
93
|
"aria-label": o(z).titleEditor.italic,
|
|
94
94
|
title: o(z).titleEditor.italic,
|
|
95
95
|
onClick: g[1] ||= (e) => o(B)?.chain().focus().toggleItalic().run()
|
|
96
|
-
}, [h(o(
|
|
96
|
+
}, [h(o(x), {
|
|
97
97
|
size: 16,
|
|
98
98
|
"stroke-width": 2
|
|
99
99
|
})], 10, k),
|
|
@@ -119,11 +119,11 @@ var ee = { class: "tpl-text-editor-wrapper tpl:relative" }, D = ["data-tpl-theme
|
|
|
119
119
|
"aria-label": o(z).mergeTag.add,
|
|
120
120
|
title: o(z).mergeTag.add,
|
|
121
121
|
onClick: g[3] ||= (...e) => o($) && o($)(...e)
|
|
122
|
-
}, [h(o(
|
|
122
|
+
}, [h(o(w), {
|
|
123
123
|
size: 16,
|
|
124
124
|
"stroke-width": 2
|
|
125
125
|
}), a(" " + l(o(z).mergeTag.add), 1)], 8, M)) : i("", !0)
|
|
126
|
-
], 64)) : (n(), m("div", N, [h(o(
|
|
126
|
+
], 64)) : (n(), m("div", N, [h(o(_), {
|
|
127
127
|
class: "tpl-spinner",
|
|
128
128
|
size: 14,
|
|
129
129
|
"stroke-width": 2
|
|
@@ -168,4 +168,4 @@ var ee = { class: "tpl-text-editor-wrapper tpl:relative" }, D = ["data-tpl-theme
|
|
|
168
168
|
//#endregion
|
|
169
169
|
export { P as default };
|
|
170
170
|
|
|
171
|
-
//# sourceMappingURL=TitleEditor-
|
|
171
|
+
//# sourceMappingURL=TitleEditor-IF7VzLTk.js.map
|