2 |
3 |
vue-tiptap example
4 |
45 |
46 |
47 |
48 |
67 |
68 |
71 |
72 |
87 |
--------------------------------------------------------------------------------
/src/sass/editor.scss:
--------------------------------------------------------------------------------
1 | .editor {
2 | position: relative;
3 | max-width: 30rem;
4 | margin: 0 auto 5rem auto;
5 |
6 | &__content {
7 |
8 | overflow-wrap: break-word;
9 | word-wrap: break-word;
10 | word-break: break-word;
11 |
12 | * {
13 | caret-color: currentColor;
14 | }
15 |
16 | pre {
17 | padding: 0.7rem 1rem;
18 | border-radius: 5px;
19 | background: $color-black;
20 | color: $color-white;
21 | font-size: 0.8rem;
22 | overflow-x: auto;
23 |
24 | code {
25 | display: block;
26 | }
27 | }
28 |
29 | p code {
30 | padding: 0.2rem 0.4rem;
31 | border-radius: 5px;
32 | font-size: 0.8rem;
33 | font-weight: bold;
34 | background: rgba($color-black, 0.1);
35 | color: rgba($color-black, 0.8);
36 | }
37 |
38 | ul,
39 | ol {
40 | padding-left: 1rem;
41 | }
42 |
43 | li > p,
44 | li > ol,
45 | li > ul {
46 | margin: 0;
47 | }
48 |
49 | a {
50 | color: inherit;
51 | }
52 |
53 | blockquote {
54 | border-left: 3px solid rgba($color-black, 0.1);
55 | color: rgba($color-black, 0.8);
56 | padding-left: 0.8rem;
57 | font-style: italic;
58 |
59 | p {
60 | margin: 0;
61 | }
62 | }
63 |
64 | img {
65 | max-width: 100%;
66 | border-radius: 3px;
67 | }
68 |
69 | table {
70 | border-collapse: collapse;
71 | table-layout: fixed;
72 | width: 100%;
73 | margin: 0;
74 | overflow: hidden;
75 |
76 | td, th {
77 | min-width: 1em;
78 | border: 2px solid $color-grey;
79 | padding: 3px 5px;
80 | vertical-align: top;
81 | box-sizing: border-box;
82 | position: relative;
83 | > * {
84 | margin-bottom: 0;
85 | }
86 | }
87 |
88 | th {
89 | font-weight: bold;
90 | text-align: left;
91 | }
92 |
93 | .selectedCell:after {
94 | z-index: 2;
95 | position: absolute;
96 | content: "";
97 | left: 0; right: 0; top: 0; bottom: 0;
98 | background: rgba(200, 200, 255, 0.4);
99 | pointer-events: none;
100 | }
101 |
102 | .column-resize-handle {
103 | position: absolute;
104 | right: -2px; top: 0; bottom: 0;
105 | width: 4px;
106 | z-index: 20;
107 | background-color: #adf;
108 | pointer-events: none;
109 | }
110 | }
111 |
112 | .tableWrapper {
113 | margin: 1em 0;
114 | overflow-x: auto;
115 | }
116 |
117 | .resize-cursor {
118 | cursor: ew-resize;
119 | cursor: col-resize;
120 | }
121 |
122 | }
123 | }
124 |
--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
1 | import globals from 'globals';
2 | import babelParser from '@babel/eslint-parser';
3 | import eslintJsonc from 'eslint-plugin-jsonc';
4 | import eslintJsoncParser from 'jsonc-eslint-parser';
5 | import vueParser from 'vue-eslint-parser';
6 | import vue from 'eslint-plugin-vue';
7 | import prettier from 'eslint-plugin-prettier';
8 | import js from '@eslint/js';
9 |
10 | export default [
11 | {
12 | // global ignores
13 | // folders can only be ignored at the global level, per-cfg you must do: '**/dist/**/*'
14 | ignores: ['**/dist/'],
15 | },
16 | // general defaults
17 | js.configs.recommended,
18 | {
19 | files: ['**/*.js'],
20 | rules: {
21 | 'prettier/prettier': [
22 | 'error',
23 | {},
24 | {
25 | usePrettierrc: true,
26 | },
27 | ],
28 | 'no-console': 'warn',
29 | },
30 | plugins: {
31 | prettier,
32 | },
33 | languageOptions: {
34 | parser: babelParser,
35 | ecmaVersion: 2018,
36 | sourceType: 'module',
37 | globals: {
38 | ...globals.node,
39 | ...globals.browser,
40 | },
41 | parserOptions: {
42 | requireConfigFile: false,
43 | allowImportExportEverywhere: true,
44 |
45 | ecmaFeatures: {
46 | experimentalObjectRestSpread: true,
47 | },
48 | },
49 | },
50 | },
51 | {
52 | files: ['**/*.json'],
53 | ignores: ['**/package.json', '**/package-lock.json'],
54 | plugins: {
55 | jsonc: eslintJsonc,
56 | prettier,
57 | },
58 | languageOptions: {
59 | parser: eslintJsoncParser,
60 | parserOptions: {
61 | jsonSyntax: 'JSON',
62 | },
63 | },
64 | rules: {
65 | 'prettier/prettier': [
66 | 'error',
67 | {},
68 | {
69 | usePrettierrc: true,
70 | },
71 | ],
72 | 'no-console': 'warn',
73 | },
74 | },
75 | ...vue.configs['flat/essential'],
76 | ...vue.configs['flat/recommended'],
77 | {
78 | files: ['**/*.vue'],
79 | plugins: {
80 | prettier,
81 | vue,
82 | },
83 | languageOptions: {
84 | parser: vueParser,
85 | ecmaVersion: 'latest',
86 | sourceType: 'module',
87 | globals: {
88 | ...globals.node,
89 | ...globals.browser,
90 | },
91 | },
92 | processor: vue.processors['.vue'],
93 | rules: {
94 | 'prettier/prettier': [
95 | 'error',
96 | {},
97 | {
98 | usePrettierrc: true,
99 | },
100 | ],
101 | ...vue.configs.base.rules,
102 | ...vue.configs.recommended.rules,
103 | ...vue.configs.essential.rules,
104 | ...vue.configs['strongly-recommended'].rules,
105 | 'no-console': 'warn',
106 | 'vue/multi-word-component-names': 'off',
107 | 'vue/no-v-html': 'off',
108 | 'vue/first-attribute-linebreak': [
109 | 'warn',
110 | {
111 | singleline: 'ignore',
112 | multiline: 'below',
113 | },
114 | ],
115 | 'vue/max-attributes-per-line': [
116 | 'error',
117 | {
118 | singleline: {
119 | max: 3,
120 | },
121 | multiline: {
122 | max: 1,
123 | },
124 | },
125 | ],
126 | 'vue/html-indent': [
127 | 'error',
128 | 2,
129 | {
130 | attribute: 1,
131 | baseIndent: 1,
132 | closeBracket: 0,
133 | alignAttributesVertically: false,
134 | ignores: [],
135 | },
136 | ],
137 | },
138 | },
139 | ];
140 |
--------------------------------------------------------------------------------
/src/components/Editor.vue:
--------------------------------------------------------------------------------
1 |