mirror of
https://github.com/eliasstepanik/strudel.git
synced 2026-01-11 13:48:40 +00:00
remove checkbox
This commit is contained in:
parent
564697e175
commit
c051a1249d
@ -1,87 +0,0 @@
|
||||
import { WidgetType } from '@codemirror/view';
|
||||
import { ViewPlugin, Decoration } from '@codemirror/view';
|
||||
import { syntaxTree } from '@codemirror/language';
|
||||
|
||||
export class CheckboxWidget extends WidgetType {
|
||||
constructor(checked) {
|
||||
super();
|
||||
this.checked = checked;
|
||||
}
|
||||
|
||||
eq(other) {
|
||||
return other.checked == this.checked;
|
||||
}
|
||||
|
||||
toDOM() {
|
||||
let wrap = document.createElement('span');
|
||||
wrap.setAttribute('aria-hidden', 'true');
|
||||
wrap.className = 'cm-boolean-toggle';
|
||||
let box = wrap.appendChild(document.createElement('input'));
|
||||
box.type = 'checkbox';
|
||||
box.checked = this.checked;
|
||||
return wrap;
|
||||
}
|
||||
|
||||
ignoreEvent() {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// EditorView
|
||||
export function checkboxes(view) {
|
||||
let widgets = [];
|
||||
for (let { from, to } of view.visibleRanges) {
|
||||
syntaxTree(view.state).iterate({
|
||||
from,
|
||||
to,
|
||||
enter: (node) => {
|
||||
if (node.name == 'BooleanLiteral') {
|
||||
let isTrue = view.state.doc.sliceString(node.from, node.to) == 'true';
|
||||
let deco = Decoration.widget({
|
||||
widget: new CheckboxWidget(isTrue),
|
||||
side: 1,
|
||||
});
|
||||
widgets.push(deco.range(node.from));
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
return Decoration.set(widgets);
|
||||
}
|
||||
|
||||
export const checkboxPlugin = ViewPlugin.fromClass(
|
||||
class {
|
||||
decorations; //: DecorationSet
|
||||
|
||||
constructor(view /* : EditorView */) {
|
||||
this.decorations = checkboxes(view);
|
||||
}
|
||||
|
||||
update(update /* : ViewUpdate */) {
|
||||
if (update.docChanged || update.viewportChanged) this.decorations = checkboxes(update.view);
|
||||
}
|
||||
},
|
||||
{
|
||||
decorations: (v) => v.decorations,
|
||||
|
||||
eventHandlers: {
|
||||
mousedown: (e, view) => {
|
||||
let target = e.target; /* as HTMLElement */
|
||||
if (target.nodeName == 'INPUT' && target.parentElement.classList.contains('cm-boolean-toggle'))
|
||||
return toggleBoolean(view, view.posAtDOM(target));
|
||||
},
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
function toggleBoolean(view /* : EditorView */, pos /* : number */) {
|
||||
let before = view.state.doc.sliceString(Math.max(0, pos), pos + 5).trim();
|
||||
let change;
|
||||
if (!['true', 'false'].includes(before)) {
|
||||
return false;
|
||||
}
|
||||
let insert = before === 'true' ? 'false' : 'true';
|
||||
change = { from: pos, to: pos + before.length, insert };
|
||||
view.dispatch({ changes: change });
|
||||
return true;
|
||||
}
|
||||
@ -15,12 +15,11 @@ import {
|
||||
updateMiniLocations,
|
||||
} from '@strudel/codemirror';
|
||||
import './style.css';
|
||||
import { checkboxPlugin } from '@strudel/codemirror/checkbox.mjs';
|
||||
import { sliderPlugin } from '@strudel/codemirror/slider.mjs';
|
||||
|
||||
export { flash, highlightMiniLocations, updateMiniLocations };
|
||||
|
||||
const staticExtensions = [javascript(), flashField, highlightExtension, checkboxPlugin, sliderPlugin];
|
||||
const staticExtensions = [javascript(), flashField, highlightExtension, sliderPlugin];
|
||||
|
||||
export default function CodeMirror({
|
||||
value,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user