cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

able to edit template strings

Browse Source
This commit is contained in:
vabene1111 2024-02-11 10:41:15 +01:00
parent ad5562d850
commit 8f272eba3b
1 changed files with 16 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
vue/src/components/MarkdownEditorComponent.vue
View File

@ -13,13 +13,13 @@
<script> <script>
import {EditorState} from "@codemirror/state" import {EditorState} from "@codemirror/state"
import {keymap, EditorView, MatchDecorator, Decoration, WidgetType, ViewPlugin} from "@codemirror/view" import {keymap, EditorView, MatchDecorator, Decoration, WidgetType, ViewPlugin, DecorationSet} from "@codemirror/view"
import {defaultKeymap, history} from "@codemirror/commands" import {defaultKeymap, history} from "@codemirror/commands"
import {markdown, markdownLanguage} from "@codemirror/lang-markdown" import {markdown, markdownLanguage} from "@codemirror/lang-markdown"
import {autocompletion} from "@codemirror/autocomplete" import {autocompletion} from "@codemirror/autocomplete"
import {defaultHighlightStyle, syntaxHighlighting} from "@codemirror/language"; import {defaultHighlightStyle, syntaxHighlighting, syntaxTree} from "@codemirror/language";
class TemplatePreviewWidget extends WidgetType { class TemplatePreviewWidget extends WidgetType {
name = undefined name = undefined
@ -37,9 +37,7 @@ class TemplatePreviewWidget extends WidgetType {
} }
toDOM() { toDOM() {
let wrap = document.createElement("span") let preview_span = document.createElement("span")
wrap.innerText = this.name
wrap.style.fontStyle = 'italic'
let display_text = 'ERROR' let display_text = 'ERROR'
if (this.name.includes('ingredients')) { if (this.name.includes('ingredients')) {
@ -51,11 +49,9 @@ class TemplatePreviewWidget extends WidgetType {
display_text = this.name.replace('{{ scale(', '').replace(') }}', '') // TODO support calculations scale(100)*2 display_text = this.name.replace('{{ scale(', '').replace(') }}', '') // TODO support calculations scale(100)*2
} }
let box = wrap.appendChild(document.createElement("b-badge")) preview_span.innerHTML = display_text
box.setAttribute('variant', 'success') preview_span.style.cssText = ` border: 1px solid blue; border-radius: 4px; padding: 0 3px; background: lightblue;`
box.innerHTML = display_text return preview_span
box.style.cssText = ` border: 1px solid blue; border-radius: 4px; padding: 0 3px; background: lightblue;`
return wrap
} }
ignoreEvent() { ignoreEvent() {
@ -94,26 +90,25 @@ export default {
const decoMatcher = new MatchDecorator({ const decoMatcher = new MatchDecorator({
regexp: /\{\{ (?:scale\(\d+\)|ingredients\[\d+\]) \}\}/g, regexp: /\{\{ (?:scale\(\d+\)|ingredients\[\d+\]) \}\}/g,
decoration: match => Decoration.replace({ decorate: (add, from, to, match, view) => {
widget: new TemplatePreviewWidget(match[0], this.ingredients), const templatePreview = new TemplatePreviewWidget(match[0], this.ingredients);
}) add(to, to, Decoration.widget({widget: templatePreview, side: 1}));
},
}) })
const placeholders = ViewPlugin.fromClass(class { const placeholders = ViewPlugin.fromClass(class {
placeholders decorations
constructor(view) { constructor(view) {
this.placeholders = decoMatcher.createDeco(view) this.decorations = decoMatcher.createDeco(view)
} }
update(update) { update(viewUpdate) {
this.placeholders = decoMatcher.updateDeco(update, this.placeholders) this.decorations = decoMatcher.updateDeco(viewUpdate, this.decorations)
} }
}, { }, {
decorations: instance => instance.placeholders, decorations: instance => instance.decorations,
provide: plugin => EditorView.atomicRanges.of(view => {
return view.plugin(plugin)?.placeholders || Decoration.none
})
}) })
let startState = EditorState.create({ let startState = EditorState.create({