Skip to content

Commit 80e6dd1

Browse files
BowrnaBowrna
committed
replacing codeflask with code-input
1 parent 2abc0a8 commit 80e6dd1

File tree

4 files changed

+149
-103
lines changed

4 files changed

+149
-103
lines changed

Diff for: ‎frontend/index.html

+3
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,8 @@
1717
<div id="app"></div>
1818

1919
<script type="module" src="/src/main.js"></script>
20+
<script src="./node_modules/@webcoder49/code-input/code-input.js"></script>
21+
<link rel="stylesheet" href="./node_modules/@webcoder49/code-input/code-input.min.css">
22+
2023
</body>
2124
</html>

Diff for: ‎frontend/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
},
1212
"dependencies": {
1313
"@tinymce/tinymce-vue": "^3",
14+
"@webcoder49/code-input": "github:WebCoder49/code-input",
1415
"axios": "^1.7.4",
1516
"buefy": "^0.9.25",
1617
"bulma": "^0.9.4",

Diff for: ‎frontend/src/components/HTMLEditor.vue

+58-56
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
11
<template>
2-
<div ref="htmlEditor" id="html-editor" class="html-editor" />
2+
<div ref="htmlEditor" class="html-editor">
3+
<code-input
4+
ref="editor"
5+
:value="value"
6+
@input="handleInput"
7+
language="html"
8+
:data-readonly="disabled"
9+
spellcheck="false"
10+
/>
11+
</div>
312
</template>
413

514
<script>
6-
import CodeFlask from 'codeflask';
7-
import { colors } from '../constants';
15+
import Prism from 'prismjs';
816
917
export default {
1018
props: {
@@ -13,66 +21,60 @@ export default {
1321
disabled: Boolean,
1422
},
1523
16-
data() {
17-
return {
18-
data: '',
19-
flask: null,
20-
};
21-
},
22-
2324
methods: {
24-
initHTMLEditor(body) {
25-
// CodeFlask editor is rendered in a shadow DOM tree to keep its styles
26-
// sandboxed away from the global styles.
27-
const el = document.createElement('code-flask');
28-
el.attachShadow({ mode: 'open' });
29-
el.shadowRoot.innerHTML = `
30-
<style>
31-
.codeflask .codeflask__flatten {
32-
font-size: 15px;
33-
white-space: pre-wrap ;
34-
word-break: break-word ;
35-
}
36-
.codeflask .codeflask__lines { background: #fafafa; z-index: 10; }
37-
.codeflask .token.tag { font-weight: bold; }
38-
.codeflask .token.attr-name { color: #111; }
39-
.codeflask .token.attr-value { color: ${colors.primary} !important; }
40-
</style>
41-
<div id="area"></area>
42-
`;
43-
this.$refs.htmlEditor.appendChild(el);
44-
45-
this.flask = new CodeFlask(el.shadowRoot.getElementById('area'), {
46-
language: this.$props.language,
47-
lineNumbers: false,
48-
styleParent: el.shadowRoot,
49-
readonly: this.disabled,
50-
});
51-
52-
this.flask.onUpdate((v) => {
53-
this.data = v;
54-
this.$emit('input', v);
55-
});
25+
handleInput(event) {
26+
this.$emit('input', event.target.value);
27+
},
5628
57-
// Set the initial value.
58-
this.flask.updateCode(body);
29+
initializeEditor() {
30+
// const textarea = this.$refs.editor;
31+
// textarea.setAttribute('is', 'code-input');
32+
// textarea.setAttribute('data-language', this.language);
5933
60-
this.$nextTick(() => {
61-
document.querySelector('code-flask').shadowRoot.querySelector('textarea').focus();
62-
});
34+
// Register Prism for syntax highlighting if needed
35+
if (window.codeInput) {
36+
window.codeInput.registerTemplate(
37+
'syntax-highlighted',
38+
window.codeInput.templates.prism(Prism, []),
39+
);
40+
// window.codeInput.setDefaultTemplate('syntax-highlighted');
41+
}
6342
},
6443
},
6544
6645
mounted() {
67-
this.initHTMLEditor(this.$props.value || '');
68-
},
69-
70-
watch: {
71-
value(newVal) {
72-
if (newVal !== this.data) {
73-
this.flask.updateCode(newVal);
74-
}
75-
},
46+
this.initializeEditor();
7647
},
7748
};
7849
</script>
50+
51+
<style>
52+
/* Hide the non-editable preview content */
53+
.code-input pre[aria-hidden="true"] {
54+
display: none !important;
55+
}
56+
57+
/* Additional styling */
58+
.html-editor {
59+
width: 100%;
60+
position: relative;
61+
}
62+
63+
.html-editor textarea {
64+
font-size: 15px;
65+
min-height: 200px;
66+
width: 100%;
67+
padding: 8px;
68+
border: none;
69+
resize: none;
70+
}
71+
72+
.token.tag { font-weight: bold; }
73+
.token.attr-name { color: #111; }
74+
.token.attr-value { color: #0066cc; }
75+
76+
.html-editor textarea:focus {
77+
outline: none;
78+
border-color: #0066cc;
79+
}
80+
</style>

Diff for: ‎frontend/src/components/MarkdownEditor.vue

+87-47
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
11
<template>
2-
<div ref="markdownEditor" id="markdown-editor" class="markdown-editor" />
2+
<div ref="markdownEditor" class="markdown-editor">
3+
<code-input
4+
ref="editor"
5+
:value="value"
6+
@input="handleInput"
7+
language="markdown"
8+
:data-readonly="disabled"
9+
spellcheck="false"
10+
/>
11+
</div>
312
</template>
413

514
<script>
6-
import 'prismjs/components/prism-markdown';
7-
import CodeFlask from 'codeflask';
8-
import { colors } from '../constants';
15+
// import 'code-input'; // Import the web component
16+
// import 'prismjs/components/prism-markdown';
17+
import Prism from 'prismjs';
918
1019
export default {
1120
props: {
@@ -17,63 +26,94 @@ export default {
1726
data() {
1827
return {
1928
data: '',
20-
flask: null,
2129
};
2230
},
23-
2431
methods: {
25-
initMarkdownEditor(body) {
26-
// CodeFlask editor is rendered in a shadow DOM tree to keep its styles
27-
// sandboxed away from the global styles.
28-
const el = document.createElement('code-flask');
29-
el.attachShadow({ mode: 'open' });
30-
31-
el.shadowRoot.innerHTML = `
32-
<style>
33-
.codeflask .codeflask__flatten { font-size: 15px; }
34-
.codeflask .token.tag { font-weight: bold; color: ${colors.primary} !important; }
35-
.codeflask .token { color: ${colors.primary} !important; }
36-
.codeflask .token.heading { font-weight: bold; }
37-
.codeflask .token.important,.token.bold,.token.strong { font-weight: bold; }
38-
.codeflask .token.em,.token.italic { font-style: italic; }
39-
.codeflask .token.comment { color: slategray; }
40-
.codeflask .token.url { color: ${colors.primary}; text-decoration: underline; }
41-
</style>
42-
<div id="area"></area>
43-
`;
44-
this.$refs.markdownEditor.appendChild(el);
45-
46-
this.flask = new CodeFlask(el.shadowRoot.getElementById('area'), {
47-
language: this.$props.language || 'markdown',
48-
lineNumbers: false,
49-
styleParent: el.shadowRoot,
50-
readonly: this.disabled,
51-
});
52-
53-
this.flask.onUpdate((v) => {
54-
this.data = v;
55-
this.$emit('input', v);
56-
});
57-
58-
// Set the initial value.
59-
this.flask.updateCode(body);
60-
61-
this.$nextTick(() => {
62-
document.querySelector('code-flask').shadowRoot.querySelector('textarea').focus();
63-
});
32+
handleInput(event) {
33+
this.$emit('input', event.target.value);
34+
},
35+
36+
initializeEditor() {
37+
// const textarea = this.$refs.editor;
38+
// textarea.setAttribute('is', 'code-input');
39+
// textarea.setAttribute('data-language', this.language);
40+
41+
// Register Prism for syntax highlighting if needed
42+
if (window.codeInput) {
43+
window.codeInput.registerTemplate(
44+
'syntax-highlighted',
45+
window.codeInput.templates.prism(Prism, []),
46+
);
47+
// window.codeInput.setDefaultTemplate('syntax-highlighted');
48+
}
6449
},
6550
},
6651
6752
mounted() {
68-
this.initMarkdownEditor(this.$props.value || '');
53+
this.initializeEditor();
6954
},
7055
7156
watch: {
7257
value(newVal) {
7358
if (newVal !== this.data) {
74-
this.flask.updateCode(newVal);
59+
this.data = newVal;
7560
}
7661
},
7762
},
7863
};
7964
</script>
65+
66+
<style>
67+
.markdown-editor {
68+
width: 100%;
69+
position: relative;
70+
}
71+
72+
/* Base editor styles */
73+
.markdown-editor textarea {
74+
font-size: 15px;
75+
min-height: 200px;
76+
width: 100%;
77+
height: 100%;
78+
border: none;
79+
border-radius: 2px;
80+
padding: 8px;
81+
box-sizing: border-box; /* Keep padding within the width/height */
82+
resize: none; /* Optional: Prevent resizing */
83+
}
84+
85+
/* Markdown syntax highlighting */
86+
.markdown-editor .token {
87+
color: var(--primary-color, #0066cc);
88+
}
89+
90+
.markdown-editor .token.heading {
91+
font-weight: bold;
92+
}
93+
94+
.markdown-editor .token.important,
95+
.markdown-editor .token.bold,
96+
.markdown-editor .token.strong {
97+
font-weight: bold;
98+
}
99+
100+
.markdown-editor .token.em,
101+
.markdown-editor .token.italic {
102+
font-style: italic;
103+
}
104+
105+
.markdown-editor .token.comment {
106+
color: slategray;
107+
}
108+
109+
.markdown-editor .token.url {
110+
color: var(--primary-color, #0066cc);
111+
text-decoration: underline;
112+
}
113+
114+
/* Focus state */
115+
.markdown-editor textarea:focus {
116+
outline: none;
117+
border-color: var(--primary-color, #0066cc);
118+
}
119+
</style>

0 commit comments

Comments
 (0)