@srcker/editor-vue-next 1.0.3 → 1.0.5

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.
Files changed (102) hide show
  1. package/dist/rich-editor.es.js +21256 -0
  2. package/dist/style/index.css +1 -0
  3. package/dist/style/style.css +1 -0
  4. package/dist/style/variables.css +1 -0
  5. package/dist/style.es.js +1 -0
  6. package/dist/variables.es.js +1 -0
  7. package/package.json +8 -2
  8. package/.vscode/extensions.json +0 -3
  9. package/index.html +0 -13
  10. package/index.ts +0 -6
  11. package/jsconfig.json +0 -8
  12. package/public/favicon.ico +0 -0
  13. package/src/App.vue +0 -9
  14. package/src/App.vue.js +0 -17
  15. package/src/Button/BackgroundButton.vue +0 -331
  16. package/src/Button/BackgroundButton.vue.js +0 -243
  17. package/src/Button/BlockQuoteButton.vue +0 -26
  18. package/src/Button/BlockQuoteButton.vue.js +0 -56
  19. package/src/Button/BoldButton.vue +0 -29
  20. package/src/Button/BoldButton.vue.js +0 -56
  21. package/src/Button/BulletListButton.vue +0 -114
  22. package/src/Button/BulletListButton.vue.js +0 -147
  23. package/src/Button/CodeBlockButton.vue +0 -28
  24. package/src/Button/CodeBlockButton.vue.js +0 -56
  25. package/src/Button/CodeButton.vue +0 -30
  26. package/src/Button/CodeButton.vue.js +0 -56
  27. package/src/Button/FontSizeButton.vue +0 -85
  28. package/src/Button/FontSizeButton.vue.js +0 -131
  29. package/src/Button/FormatButton.vue +0 -25
  30. package/src/Button/FormatButton.vue.js +0 -54
  31. package/src/Button/HeadingButton.vue +0 -103
  32. package/src/Button/HeadingButton.vue.js +0 -164
  33. package/src/Button/ImageUploadButton.vue +0 -93
  34. package/src/Button/ImageUploadButton.vue.js +0 -123
  35. package/src/Button/IndentLeftButton.vue +0 -25
  36. package/src/Button/IndentLeftButton.vue.js +0 -54
  37. package/src/Button/IndentRightButton.vue +0 -29
  38. package/src/Button/IndentRightButton.vue.js +0 -54
  39. package/src/Button/ItalicButton.vue +0 -29
  40. package/src/Button/ItalicButton.vue.js +0 -56
  41. package/src/Button/LineHeightButton.vue +0 -88
  42. package/src/Button/LineHeightButton.vue.js +0 -131
  43. package/src/Button/LinkButton.vue +0 -44
  44. package/src/Button/LinkButton.vue.js +0 -69
  45. package/src/Button/OrderedListButton.vue +0 -121
  46. package/src/Button/OrderedListButton.vue.js +0 -146
  47. package/src/Button/RedoButton.vue +0 -29
  48. package/src/Button/RedoButton.vue.js +0 -55
  49. package/src/Button/StrikeButton.vue +0 -30
  50. package/src/Button/StrikeButton.vue.js +0 -56
  51. package/src/Button/SubscriptButton.vue +0 -29
  52. package/src/Button/SubscriptButton.vue.js +0 -56
  53. package/src/Button/SuperscriptButton.vue +0 -29
  54. package/src/Button/SuperscriptButton.vue.js +0 -56
  55. package/src/Button/TextAlignCenterButton.vue +0 -26
  56. package/src/Button/TextAlignCenterButton.vue.js +0 -56
  57. package/src/Button/TextAlignLeftButton.vue +0 -26
  58. package/src/Button/TextAlignLeftButton.vue.js +0 -56
  59. package/src/Button/TextAlignRightButton.vue +0 -26
  60. package/src/Button/TextAlignRightButton.vue.js +0 -56
  61. package/src/Button/TextColorButton.vue +0 -329
  62. package/src/Button/TextColorButton.vue.js +0 -243
  63. package/src/Button/ThemeButton.vue +0 -34
  64. package/src/Button/ThemeButton.vue.js +0 -63
  65. package/src/Button/UnderLineButton.vue +0 -29
  66. package/src/Button/UnderLineButton.vue.js +0 -56
  67. package/src/Button/UndoButton.vue +0 -29
  68. package/src/Button/UndoButton.vue.js +0 -55
  69. package/src/Components/IconArrow.vue +0 -16
  70. package/src/Components/IconArrow.vue.js +0 -30
  71. package/src/Components/IconCheck.vue +0 -40
  72. package/src/Components/IconCheck.vue.js +0 -59
  73. package/src/EditorToolbar.vue +0 -150
  74. package/src/EditorToolbar.vue.js +0 -306
  75. package/src/Extensions/BulletListStyle.js +0 -19
  76. package/src/Extensions/BulletListStyle.ts +0 -24
  77. package/src/Extensions/FontSize.js +0 -27
  78. package/src/Extensions/FontSize.ts +0 -37
  79. package/src/Extensions/Indent.js +0 -58
  80. package/src/Extensions/Indent.ts +0 -73
  81. package/src/Extensions/OrderedListStyle.js +0 -19
  82. package/src/Extensions/OrderedListStyle.ts +0 -24
  83. package/src/Extensions/UploadImage.js +0 -18
  84. package/src/Extensions/UploadImage.ts +0 -22
  85. package/src/Extensions/index.js +0 -6
  86. package/src/Extensions/index.ts +0 -6
  87. package/src/Extensions/shims.d.ts +0 -26
  88. package/src/RichEditor.vue +0 -191
  89. package/src/RichEditor.vue.js +0 -199
  90. package/src/env.d.ts +0 -7
  91. package/src/index.js +0 -6
  92. package/src/index.ts +0 -11
  93. package/src/main.js +0 -4
  94. package/src/main.ts +0 -7
  95. package/src/styles/style.scss +0 -196
  96. package/src/styles/theme.css +0 -28
  97. package/src/styles/variables.css +0 -158
  98. package/src/styles/variables.scss +0 -175
  99. package/src/types.js +0 -1
  100. package/src/types.ts +0 -7
  101. package/tsconfig.json +0 -17
  102. package/vite.config.ts +0 -24
@@ -1,28 +0,0 @@
1
- <template>
2
- <button
3
- class="icon-button"
4
- :class="{ 'active': editor.isActive('codeBlock') }"
5
- @click="editor.chain().focus().toggleCodeBlock().run()" >
6
-
7
- <div class="icon">
8
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
9
- <path fill="currentColor" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M64 96c0-35.3 28.7-64 64-64l384 0c35.3 0 64 28.7 64 64l0 240-64 0 0-240-384 0 0 240-64 0 0-240zM0 403.2C0 392.6 8.6 384 19.2 384l601.6 0c10.6 0 19.2 8.6 19.2 19.2 0 42.4-34.4 76.8-76.8 76.8L76.8 480C34.4 480 0 445.6 0 403.2zM281 209l-31 31 31 31c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-48-48c-9.4-9.4-9.4-24.6 0-33.9l48-48c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9zM393 175l48 48c9.4 9.4 9.4 24.6 0 33.9l-48 48c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l31-31-31-31c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0z"/>
10
- </svg>
11
- </div>
12
-
13
- <div class="tips">代码块</div>
14
- </button>
15
- </template>
16
-
17
-
18
- <script setup>
19
- const props = defineProps({
20
- editor: {
21
- type: Object,
22
- required: true
23
- }
24
- })
25
-
26
-
27
-
28
- </script>
@@ -1,56 +0,0 @@
1
- const props = defineProps({
2
- editor: {
3
- type: Object,
4
- required: true
5
- }
6
- });
7
- const __VLS_ctx = {
8
- ...{},
9
- ...{},
10
- ...{},
11
- };
12
- let __VLS_components;
13
- let __VLS_intrinsics;
14
- let __VLS_directives;
15
- __VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
16
- ...{ onClick: (...[$event]) => {
17
- __VLS_ctx.editor.chain().focus().toggleCodeBlock().run();
18
- // @ts-ignore
19
- [editor,];
20
- } },
21
- ...{ class: "icon-button" },
22
- ...{ class: ({ 'active': __VLS_ctx.editor.isActive('codeBlock') }) },
23
- });
24
- /** @type {__VLS_StyleScopedClasses['icon-button']} */ ;
25
- /** @type {__VLS_StyleScopedClasses['active']} */ ;
26
- __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
27
- ...{ class: "icon" },
28
- });
29
- /** @type {__VLS_StyleScopedClasses['icon']} */ ;
30
- __VLS_asFunctionalElement1(__VLS_intrinsics.svg, __VLS_intrinsics.svg)({
31
- xmlns: "http://www.w3.org/2000/svg",
32
- viewBox: "0 0 640 512",
33
- });
34
- __VLS_asFunctionalElement1(__VLS_intrinsics.path)({
35
- fill: "currentColor",
36
- stroke: "currentColor",
37
- 'stroke-width': "4",
38
- 'stroke-linecap': "round",
39
- 'stroke-linejoin': "round",
40
- d: "M64 96c0-35.3 28.7-64 64-64l384 0c35.3 0 64 28.7 64 64l0 240-64 0 0-240-384 0 0 240-64 0 0-240zM0 403.2C0 392.6 8.6 384 19.2 384l601.6 0c10.6 0 19.2 8.6 19.2 19.2 0 42.4-34.4 76.8-76.8 76.8L76.8 480C34.4 480 0 445.6 0 403.2zM281 209l-31 31 31 31c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-48-48c-9.4-9.4-9.4-24.6 0-33.9l48-48c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9zM393 175l48 48c9.4 9.4 9.4 24.6 0 33.9l-48 48c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l31-31-31-31c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0z",
41
- });
42
- __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
43
- ...{ class: "tips" },
44
- });
45
- /** @type {__VLS_StyleScopedClasses['tips']} */ ;
46
- // @ts-ignore
47
- [editor,];
48
- const __VLS_export = (await import('vue')).defineComponent({
49
- props: {
50
- editor: {
51
- type: Object,
52
- required: true
53
- }
54
- },
55
- });
56
- export default {};
@@ -1,30 +0,0 @@
1
- <template>
2
- <button
3
- class="icon-button"
4
- :class="{ 'active': editor.isActive('code') }"
5
- @click="editor.chain().focus().toggleCode().run()" >
6
-
7
- <div class="icon">
8
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
9
- <path fill="currentColor" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M360.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm64.6 136.1c-12.5 12.5-12.5 32.8 0 45.3l73.4 73.4-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l96-96c12.5-12.5 12.5-32.8 0-45.3l-96-96c-12.5-12.5-32.8-12.5-45.3 0zm-274.7 0c-12.5-12.5-32.8-12.5-45.3 0l-96 96c-12.5 12.5-12.5 32.8 0 45.3l96 96c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 150.6 182.6c12.5-12.5 12.5-32.8 0-45.3z"/>
10
- </svg>
11
- </div>
12
-
13
- <div class="tips">行内代码</div>
14
- </button>
15
- </template>
16
-
17
-
18
- <script setup>
19
- const props = defineProps({
20
- editor: {
21
- type: Object,
22
- required: true
23
- }
24
- })
25
-
26
-
27
-
28
- </script>
29
-
30
-
@@ -1,56 +0,0 @@
1
- const props = defineProps({
2
- editor: {
3
- type: Object,
4
- required: true
5
- }
6
- });
7
- const __VLS_ctx = {
8
- ...{},
9
- ...{},
10
- ...{},
11
- };
12
- let __VLS_components;
13
- let __VLS_intrinsics;
14
- let __VLS_directives;
15
- __VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
16
- ...{ onClick: (...[$event]) => {
17
- __VLS_ctx.editor.chain().focus().toggleCode().run();
18
- // @ts-ignore
19
- [editor,];
20
- } },
21
- ...{ class: "icon-button" },
22
- ...{ class: ({ 'active': __VLS_ctx.editor.isActive('code') }) },
23
- });
24
- /** @type {__VLS_StyleScopedClasses['icon-button']} */ ;
25
- /** @type {__VLS_StyleScopedClasses['active']} */ ;
26
- __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
27
- ...{ class: "icon" },
28
- });
29
- /** @type {__VLS_StyleScopedClasses['icon']} */ ;
30
- __VLS_asFunctionalElement1(__VLS_intrinsics.svg, __VLS_intrinsics.svg)({
31
- xmlns: "http://www.w3.org/2000/svg",
32
- viewBox: "0 0 576 512",
33
- });
34
- __VLS_asFunctionalElement1(__VLS_intrinsics.path)({
35
- fill: "currentColor",
36
- stroke: "currentColor",
37
- 'stroke-width': "4",
38
- 'stroke-linecap': "round",
39
- 'stroke-linejoin': "round",
40
- d: "M360.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm64.6 136.1c-12.5 12.5-12.5 32.8 0 45.3l73.4 73.4-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l96-96c12.5-12.5 12.5-32.8 0-45.3l-96-96c-12.5-12.5-32.8-12.5-45.3 0zm-274.7 0c-12.5-12.5-32.8-12.5-45.3 0l-96 96c-12.5 12.5-12.5 32.8 0 45.3l96 96c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 150.6 182.6c12.5-12.5 12.5-32.8 0-45.3z",
41
- });
42
- __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
43
- ...{ class: "tips" },
44
- });
45
- /** @type {__VLS_StyleScopedClasses['tips']} */ ;
46
- // @ts-ignore
47
- [editor,];
48
- const __VLS_export = (await import('vue')).defineComponent({
49
- props: {
50
- editor: {
51
- type: Object,
52
- required: true
53
- }
54
- },
55
- });
56
- export default {};
@@ -1,85 +0,0 @@
1
- <template>
2
-
3
- <div class="dropdown-button font-button" ref="wrapperRef" :class="{ 'is-open': isOpen }">
4
- <div class="trigger" @click="isOpen = !isOpen">
5
-
6
- <div class="icon">
7
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
8
- <path fill="currentColor" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l128 0 0 352c0 17.7 14.3 32 32 32s32-14.3 32-32l0-352 128 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 32z"/>
9
- </svg>
10
- </div>
11
- <span class="label">{{ sizeLabel }}</span>
12
- </div>
13
-
14
- <transition name="dropdown">
15
- <div class="dropdown" v-show="isOpen">
16
- <div
17
- class="item"
18
- v-for="size in sizes"
19
- :key="size"
20
- :class="{ 'is-selected': editor.isActive('textStyle', { fontSize: size }) }"
21
- @click="setFontSize(size)">
22
- <span class="text">{{ size }}</span>
23
- </div>
24
- </div>
25
- </transition>
26
- </div>
27
-
28
- </template>
29
-
30
-
31
- <script setup>
32
- import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
33
-
34
-
35
- const isOpen = ref(false)
36
- const wrapperRef = ref(null)
37
-
38
- const sizes = ['12px', '14px', '16px', '18px', '20px', '24px', '30px', '36px', '48px']
39
-
40
- const setFontSize = (size) => {
41
- props.editor.chain().focus().setMark('textStyle', { fontSize: size }).run();
42
- isOpen.value = false
43
- }
44
-
45
-
46
-
47
- const sizeLabel = computed(() => {
48
- if (!props.editor) return '16px'
49
- const size = props.editor.getAttributes('textStyle').fontSize
50
- return size || '16px'
51
- })
52
-
53
-
54
-
55
- const props = defineProps({
56
- editor: {
57
- type: Object,
58
- required: true
59
- }
60
- })
61
-
62
- const handleClickOutside = (e) => {
63
- if (!wrapperRef.value) return
64
-
65
- if (!wrapperRef.value.contains(e.target)) {
66
- isOpen.value = false
67
- }
68
- }
69
-
70
- onMounted(() => {
71
- document.addEventListener('mousedown', handleClickOutside)
72
- })
73
-
74
- onBeforeUnmount(() => {
75
- document.removeEventListener('mousedown', handleClickOutside)
76
- })
77
-
78
- </script>
79
-
80
-
81
- <style lang="css" scoped>
82
- .trigger{
83
- width: 55px;
84
- }
85
- </style>
@@ -1,131 +0,0 @@
1
- import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
2
- const isOpen = ref(false);
3
- const wrapperRef = ref(null);
4
- const sizes = ['12px', '14px', '16px', '18px', '20px', '24px', '30px', '36px', '48px'];
5
- const setFontSize = (size) => {
6
- props.editor.chain().focus().setMark('textStyle', { fontSize: size }).run();
7
- isOpen.value = false;
8
- };
9
- const sizeLabel = computed(() => {
10
- if (!props.editor)
11
- return '16px';
12
- const size = props.editor.getAttributes('textStyle').fontSize;
13
- return size || '16px';
14
- });
15
- const props = defineProps({
16
- editor: {
17
- type: Object,
18
- required: true
19
- }
20
- });
21
- const handleClickOutside = (e) => {
22
- if (!wrapperRef.value)
23
- return;
24
- if (!wrapperRef.value.contains(e.target)) {
25
- isOpen.value = false;
26
- }
27
- };
28
- onMounted(() => {
29
- document.addEventListener('mousedown', handleClickOutside);
30
- });
31
- onBeforeUnmount(() => {
32
- document.removeEventListener('mousedown', handleClickOutside);
33
- });
34
- const __VLS_ctx = {
35
- ...{},
36
- ...{},
37
- ...{},
38
- ...{},
39
- };
40
- let __VLS_components;
41
- let __VLS_intrinsics;
42
- let __VLS_directives;
43
- __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
44
- ...{ class: "dropdown-button font-button" },
45
- ref: "wrapperRef",
46
- ...{ class: ({ 'is-open': __VLS_ctx.isOpen }) },
47
- });
48
- /** @type {__VLS_StyleScopedClasses['dropdown-button']} */ ;
49
- /** @type {__VLS_StyleScopedClasses['font-button']} */ ;
50
- /** @type {__VLS_StyleScopedClasses['is-open']} */ ;
51
- __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
52
- ...{ onClick: (...[$event]) => {
53
- __VLS_ctx.isOpen = !__VLS_ctx.isOpen;
54
- // @ts-ignore
55
- [isOpen, isOpen, isOpen,];
56
- } },
57
- ...{ class: "trigger" },
58
- });
59
- /** @type {__VLS_StyleScopedClasses['trigger']} */ ;
60
- __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
61
- ...{ class: "icon" },
62
- });
63
- /** @type {__VLS_StyleScopedClasses['icon']} */ ;
64
- __VLS_asFunctionalElement1(__VLS_intrinsics.svg, __VLS_intrinsics.svg)({
65
- xmlns: "http://www.w3.org/2000/svg",
66
- viewBox: "0 0 384 512",
67
- });
68
- __VLS_asFunctionalElement1(__VLS_intrinsics.path)({
69
- fill: "currentColor",
70
- stroke: "currentColor",
71
- 'stroke-width': "4",
72
- 'stroke-linecap': "round",
73
- 'stroke-linejoin': "round",
74
- d: "M32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l128 0 0 352c0 17.7 14.3 32 32 32s32-14.3 32-32l0-352 128 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 32z",
75
- });
76
- __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
77
- ...{ class: "label" },
78
- });
79
- /** @type {__VLS_StyleScopedClasses['label']} */ ;
80
- (__VLS_ctx.sizeLabel);
81
- let __VLS_0;
82
- /** @ts-ignore @type {typeof __VLS_components.transition | typeof __VLS_components.Transition | typeof __VLS_components.transition | typeof __VLS_components.Transition} */
83
- transition;
84
- // @ts-ignore
85
- const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
86
- name: "dropdown",
87
- }));
88
- const __VLS_2 = __VLS_1({
89
- name: "dropdown",
90
- }, ...__VLS_functionalComponentArgsRest(__VLS_1));
91
- const { default: __VLS_5 } = __VLS_3.slots;
92
- __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
93
- ...{ class: "dropdown" },
94
- });
95
- __VLS_asFunctionalDirective(__VLS_directives.vShow, {})(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.isOpen) }, null, null);
96
- /** @type {__VLS_StyleScopedClasses['dropdown']} */ ;
97
- for (const [size] of __VLS_vFor((__VLS_ctx.sizes))) {
98
- __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
99
- ...{ onClick: (...[$event]) => {
100
- __VLS_ctx.setFontSize(size);
101
- // @ts-ignore
102
- [isOpen, sizeLabel, sizes, setFontSize,];
103
- } },
104
- ...{ class: "item" },
105
- key: (size),
106
- ...{ class: ({ 'is-selected': __VLS_ctx.editor.isActive('textStyle', { fontSize: size }) }) },
107
- });
108
- /** @type {__VLS_StyleScopedClasses['item']} */ ;
109
- /** @type {__VLS_StyleScopedClasses['is-selected']} */ ;
110
- __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
111
- ...{ class: "text" },
112
- });
113
- /** @type {__VLS_StyleScopedClasses['text']} */ ;
114
- (size);
115
- // @ts-ignore
116
- [editor,];
117
- }
118
- // @ts-ignore
119
- [];
120
- var __VLS_3;
121
- // @ts-ignore
122
- [];
123
- const __VLS_export = (await import('vue')).defineComponent({
124
- props: {
125
- editor: {
126
- type: Object,
127
- required: true
128
- }
129
- },
130
- });
131
- export default {};
@@ -1,25 +0,0 @@
1
- <template>
2
- <button
3
- class="icon-button"
4
- @click="editor.chain().focus().unsetAllMarks().run()" >
5
- <div class="icon">
6
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
7
- <path fill="currentColor" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M162.4 6c-1.5-3.6-5-6-8.9-6l-19 0c-3.9 0-7.5 2.4-8.9 6L104.9 57.7c-3.2 8-14.6 8-17.8 0L66.4 6c-1.5-3.6-5-6-8.9-6L48 0C21.5 0 0 21.5 0 48l0 208 384 0 0-208c0-26.5-21.5-48-48-48L230.5 0c-3.9 0-7.5 2.4-8.9 6L200.9 57.7c-3.2 8-14.6 8-17.8 0L162.4 6zM0 304l0 16c0 35.3 28.7 64 64 64l64 0 0 64c0 35.3 28.7 64 64 64s64-28.7 64-64l0-64 64 0c35.3 0 64-28.7 64-64l0-16-384 0zM192 464c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16-7.2 16-16 16z"/>
8
- </svg>
9
- </div>
10
- <div class="tips">清除格式</div>
11
- </button>
12
- </template>
13
-
14
-
15
- <script setup>
16
- const props = defineProps({
17
- editor: {
18
- type: Object,
19
- required: true
20
- }
21
- })
22
-
23
-
24
-
25
- </script>
@@ -1,54 +0,0 @@
1
- const props = defineProps({
2
- editor: {
3
- type: Object,
4
- required: true
5
- }
6
- });
7
- const __VLS_ctx = {
8
- ...{},
9
- ...{},
10
- ...{},
11
- };
12
- let __VLS_components;
13
- let __VLS_intrinsics;
14
- let __VLS_directives;
15
- __VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
16
- ...{ onClick: (...[$event]) => {
17
- __VLS_ctx.editor.chain().focus().unsetAllMarks().run();
18
- // @ts-ignore
19
- [editor,];
20
- } },
21
- ...{ class: "icon-button" },
22
- });
23
- /** @type {__VLS_StyleScopedClasses['icon-button']} */ ;
24
- __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
25
- ...{ class: "icon" },
26
- });
27
- /** @type {__VLS_StyleScopedClasses['icon']} */ ;
28
- __VLS_asFunctionalElement1(__VLS_intrinsics.svg, __VLS_intrinsics.svg)({
29
- xmlns: "http://www.w3.org/2000/svg",
30
- viewBox: "0 0 512 512",
31
- });
32
- __VLS_asFunctionalElement1(__VLS_intrinsics.path)({
33
- fill: "currentColor",
34
- stroke: "currentColor",
35
- 'stroke-width': "4",
36
- 'stroke-linecap': "round",
37
- 'stroke-linejoin': "round",
38
- d: "M162.4 6c-1.5-3.6-5-6-8.9-6l-19 0c-3.9 0-7.5 2.4-8.9 6L104.9 57.7c-3.2 8-14.6 8-17.8 0L66.4 6c-1.5-3.6-5-6-8.9-6L48 0C21.5 0 0 21.5 0 48l0 208 384 0 0-208c0-26.5-21.5-48-48-48L230.5 0c-3.9 0-7.5 2.4-8.9 6L200.9 57.7c-3.2 8-14.6 8-17.8 0L162.4 6zM0 304l0 16c0 35.3 28.7 64 64 64l64 0 0 64c0 35.3 28.7 64 64 64s64-28.7 64-64l0-64 64 0c35.3 0 64-28.7 64-64l0-16-384 0zM192 464c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16-7.2 16-16 16z",
39
- });
40
- __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
41
- ...{ class: "tips" },
42
- });
43
- /** @type {__VLS_StyleScopedClasses['tips']} */ ;
44
- // @ts-ignore
45
- [];
46
- const __VLS_export = (await import('vue')).defineComponent({
47
- props: {
48
- editor: {
49
- type: Object,
50
- required: true
51
- }
52
- },
53
- });
54
- export default {};
@@ -1,103 +0,0 @@
1
- <template>
2
-
3
- <div class="dropdown-button heading-button" ref="wrapperRef" :class="{ 'is-open': isOpen }">
4
- <div class="trigger" @click="isOpen = !isOpen">
5
- <div class="icon">
6
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
7
- <path fill="currentColor" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M0 64C0 46.3 14.3 32 32 32l96 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-16 0 0 112 224 0 0-112-16 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l96 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-16 0 0 320 16 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-96 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l16 0 0-144-224 0 0 144 16 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-96 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l16 0 0-320-16 0C14.3 96 0 81.7 0 64z"/>
8
- </svg>
9
- </div>
10
- <span class="label">{{ headingLabel }}</span>
11
- </div>
12
-
13
-
14
- <transition name="dropdown">
15
- <div class="dropdown" v-show="isOpen">
16
- <div
17
- class="item" :class="{ 'is-selected': editor.isActive('paragraph') }" @click="setParagraph()">
18
- <span class="icon">H</span>
19
- <span class="text">正文</span>
20
- </div>
21
- <div
22
- class="item"
23
- v-for="level in [1, 2, 3, 4, 5]"
24
- :key="level"
25
- :class="{ 'is-selected': editor.isActive('heading', { level }) }"
26
- @click="setHeading(level)">
27
- <span class="icon">H{{ level }}</span>
28
- <span class="text" :style="{ fontSize: sizes[level], fontWeight: 'bold' }">标题 {{ level }}</span>
29
- </div>
30
- </div>
31
- </transition>
32
-
33
-
34
- </div>
35
-
36
- </template>
37
-
38
-
39
- <script setup>
40
- import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
41
-
42
-
43
- const isOpen = ref(false)
44
- const wrapperRef = ref(null)
45
-
46
- const sizes = { 1: '24px', 2: '20px', 3: '18px', 4: '16px', 5: '14px' }
47
-
48
- const setHeading = (level) => {
49
- props.editor.chain().focus().toggleHeading({ level: level }).run()
50
- isOpen.value = false
51
- }
52
-
53
- const setParagraph = () => {
54
- props.editor.chain().focus().setParagraph().run()
55
- isOpen.value = false
56
- }
57
-
58
- const headingLabel = computed(() => {
59
-
60
- if (!props.editor) return '正文'
61
-
62
- for (let i = 1; i <= 5; i++) {
63
- if (props.editor.isActive('heading', { level: i })) {
64
- return `标题${i}`
65
- }
66
- }
67
-
68
- return '正文'
69
- })
70
-
71
-
72
- const props = defineProps({
73
- editor: {
74
- type: Object,
75
- required: true
76
- }
77
- })
78
-
79
- const handleClickOutside = (e) => {
80
- if (!wrapperRef.value) return
81
-
82
- if (!wrapperRef.value.contains(e.target)) {
83
- isOpen.value = false
84
- }
85
- }
86
-
87
- onMounted(() => {
88
- document.addEventListener('mousedown', handleClickOutside)
89
- })
90
-
91
- onBeforeUnmount(() => {
92
- document.removeEventListener('mousedown', handleClickOutside)
93
- })
94
-
95
- </script>
96
-
97
-
98
-
99
- <style lang="css" scoped>
100
- .trigger{
101
- width: 60px;
102
- }
103
- </style>