diff --git a/src/components/QuillEditor.vue b/src/components/QuillEditor.vue index 983038a..c747a41 100644 --- a/src/components/QuillEditor.vue +++ b/src/components/QuillEditor.vue @@ -14,6 +14,52 @@ const emit = defineEmits<{ const editorContainer = ref() let quill: Quill | null = null +const codeLang = ref('') +const codeLanguages = [ + 'text', + 'javascript', + 'typescript', + 'html', + 'xml', + 'css', + 'json', + 'markdown', + 'python', + 'java', + 'c', + 'cpp', + 'csharp', + 'go', + 'rust', + 'php', + 'sql', + 'bash', + 'yaml' +] + +function applyCodeLang() { + if (!quill || !codeLang.value) return + const lang = codeLang.value + const sel = quill.getSelection() + if (!sel) { + codeLang.value = '' + return + } + const [blot] = (quill.getLeaf(sel.index) as unknown as [{ domNode?: HTMLElement } | undefined, number]) + const leafNode = blot?.domNode + const line = leafNode?.closest?.('.ql-code-block') as HTMLElement | null + if (!line) { + codeLang.value = '' + return + } + const container = (line.closest('.ql-code-block-container') || line.parentElement) as HTMLElement | null + if (container) { + container.setAttribute('data-language', lang) + emit('update:modelValue', quill.root.innerHTML) + } + codeLang.value = '' +} + onMounted(() => { if (!editorContainer.value) return @@ -74,14 +120,60 @@ watch(() => props.modelValue, (val) => {