${example} {
+ console.log('ola!');
+ navigator.clipboard.writeText(example);
+ e.stopPropagation();
+}}
+>
+{example}
+
+*/
+}
+
+const jsdocCompletions = jsdoc.docs
+ .filter(
+ (doc) =>
+ getDocLabel(doc) &&
+ !getDocLabel(doc).startsWith('_') &&
+ !['package'].includes(doc.kind) &&
+ !['superdirtOnly', 'noAutocomplete'].some((tag) => doc.tags?.find((t) => t.originalTitle === tag)),
+ )
+ // https://codemirror.net/docs/ref/#autocomplete.Completion
+ .map((doc) /*: Completion */ => ({
+ label: getDocLabel(doc),
+ // detail: 'xxx', // An optional short piece of information to show (with a different style) after the label.
+ info: () => Autocomplete({ doc }),
+ type: 'function', // https://codemirror.net/docs/ref/#autocomplete.Completion.type
+ }));
+
+export const strudelAutocomplete = (context /* : CompletionContext */) => {
+ let word = context.matchBefore(/\w*/);
+ if (word.from == word.to && !context.explicit) return null;
+ return {
+ from: word.from,
+ options: jsdocCompletions,
+ /* options: [
+ { label: 'match', type: 'keyword' },
+ { label: 'hello', type: 'variable', info: '(World)' },
+ { label: 'magic', type: 'text', apply: '⠁⭒*.✩.*⭒⠁', detail: 'macro' },
+ ], */
+ };
+};
+
+export function isAutoCompletionEnabled(on) {
+ return on
+ ? [
+ autocompletion({ override: [strudelAutocomplete] }),
+ //javascriptLanguage.data.of({ autocomplete: strudelAutocomplete }),
+ ]
+ : []; // autocompletion({ override: [] })
+}
diff --git a/packages/codemirror/codemirror.mjs b/packages/codemirror/codemirror.mjs
index 2094416e..8a887036 100644
--- a/packages/codemirror/codemirror.mjs
+++ b/packages/codemirror/codemirror.mjs
@@ -1,37 +1,104 @@
-import { defaultKeymap } from '@codemirror/commands';
+import { closeBrackets } from '@codemirror/autocomplete';
+// import { search, highlightSelectionMatches } from '@codemirror/search';
+import { history } from '@codemirror/commands';
import { javascript } from '@codemirror/lang-javascript';
import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
-import { EditorState } from '@codemirror/state';
-import { EditorView, highlightActiveLineGutter, keymap, lineNumbers } from '@codemirror/view';
-import { Drawer, repl } from '@strudel.cycles/core';
-import { flashField, flash } from './flash.mjs';
-import { highlightExtension, highlightMiniLocations } from './highlight.mjs';
-import { oneDark } from './themes/one-dark';
+import { Compartment, EditorState, Prec } from '@codemirror/state';
+import { EditorView, highlightActiveLineGutter, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view';
+import { Pattern, Drawer, repl, cleanupDraw } from '@strudel.cycles/core';
+import { isAutoCompletionEnabled } from './autocomplete.mjs';
+import { isTooltipEnabled } from './tooltip.mjs';
+import { flash, isFlashEnabled } from './flash.mjs';
+import { highlightMiniLocations, isPatternHighlightingEnabled, updateMiniLocations } from './highlight.mjs';
+import { keybindings } from './keybindings.mjs';
+import { initTheme, activateTheme, theme } from './themes.mjs';
+import { updateWidgets, sliderPlugin } from './slider.mjs';
+import { persistentAtom } from '@nanostores/persistent';
+
+const extensions = {
+ isLineWrappingEnabled: (on) => (on ? EditorView.lineWrapping : []),
+ isLineNumbersDisplayed: (on) => (on ? lineNumbers() : []),
+ theme,
+ isAutoCompletionEnabled,
+ isTooltipEnabled,
+ isPatternHighlightingEnabled,
+ isActiveLineHighlighted: (on) => (on ? [highlightActiveLine(), highlightActiveLineGutter()] : []),
+ isFlashEnabled,
+ keybindings,
+};
+const compartments = Object.fromEntries(Object.keys(extensions).map((key) => [key, new Compartment()]));
+
+export const defaultSettings = {
+ keybindings: 'codemirror',
+ isLineNumbersDisplayed: true,
+ isActiveLineHighlighted: false,
+ isAutoCompletionEnabled: false,
+ isPatternHighlightingEnabled: true,
+ isFlashEnabled: true,
+ isTooltipEnabled: false,
+ isLineWrappingEnabled: false,
+ theme: 'strudelTheme',
+ fontFamily: 'monospace',
+ fontSize: 18,
+};
+
+export const codemirrorSettings = persistentAtom('codemirror-settings', defaultSettings, {
+ encode: JSON.stringify,
+ decode: JSON.parse,
+});
// https://codemirror.net/docs/guide/
-export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, theme = oneDark, root }) {
+export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, root }) {
+ const settings = codemirrorSettings.get();
+ const initialSettings = Object.keys(compartments).map((key) =>
+ compartments[key].of(extensions[key](parseBooleans(settings[key]))),
+ );
+ initTheme(settings.theme);
let state = EditorState.create({
doc: initialCode,
extensions: [
- theme,
+ /* search(),
+ highlightSelectionMatches(), */
+ ...initialSettings,
javascript(),
- lineNumbers(),
- highlightExtension,
- highlightActiveLineGutter(),
+ sliderPlugin,
+ // indentOnInput(), // works without. already brought with javascript extension?
+ // bracketMatching(), // does not do anything
+ closeBrackets(),
syntaxHighlighting(defaultHighlightStyle),
- keymap.of(defaultKeymap),
- flashField,
+ history(),
EditorView.updateListener.of((v) => onChange(v)),
- keymap.of([
- {
- key: 'Ctrl-Enter',
- run: () => onEvaluate(),
+ Prec.highest(
+ keymap.of([
+ {
+ key: 'Ctrl-Enter',
+ run: () => onEvaluate?.(),
+ },
+ {
+ key: 'Alt-Enter',
+ run: () => onEvaluate?.(),
+ },
+ {
+ key: 'Ctrl-.',
+ run: () => onStop?.(),
+ },
+ {
+ key: 'Alt-.',
+ run: (_, e) => {
+ e.preventDefault();
+ onStop?.();
+ },
+ },
+ /* {
+ key: 'Ctrl-Shift-.',
+ run: () => (onPanic ? onPanic() : onStop?.()),
},
{
- key: 'Ctrl-.',
- run: () => onStop(),
- },
- ]),
+ key: 'Ctrl-Shift-Enter',
+ run: () => (onReEvaluate ? onReEvaluate() : onEvaluate?.()),
+ }, */
+ ]),
+ ),
],
});
@@ -43,45 +110,76 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, the
export class StrudelMirror {
constructor(options) {
- const { root, initialCode = '', onDraw, drawTime = [-2, 2], prebake, ...replOptions } = options;
+ const {
+ root,
+ id,
+ initialCode = '',
+ onDraw,
+ drawTime = [0, 0],
+ autodraw,
+ prebake,
+ bgFill = true,
+ ...replOptions
+ } = options;
this.code = initialCode;
+ this.root = root;
+ this.miniLocations = [];
+ this.widgets = [];
+ this.painters = [];
+ this.drawTime = drawTime;
+ this.onDraw = onDraw;
+ const self = this;
+ this.id = id || s4();
this.drawer = new Drawer((haps, time) => {
const currentFrame = haps.filter((hap) => time >= hap.whole.begin && time <= hap.endClipped);
this.highlight(currentFrame, time);
- onDraw?.(haps, time, currentFrame);
+ this.onDraw?.(haps, time, currentFrame, this.painters);
}, drawTime);
- const prebaked = prebake();
- prebaked.then(async () => {
- if (!onDraw) {
- return;
- }
- const { scheduler, evaluate } = await this.repl;
- // draw first frame instantly
- prebaked.then(async () => {
- await evaluate(this.code, false);
- this.drawer.invalidate(scheduler);
- onDraw?.(this.drawer.visibleHaps, 0, []);
- });
- });
+ // this approach does not work with multiple repls on screen
+ // TODO: refactor onPaint usages + find fix, maybe remove painters here?
+ Pattern.prototype.onPaint = function (onPaint) {
+ self.painters.push(onPaint);
+ return this;
+ };
+
+ this.prebaked = prebake();
+ autodraw && this.drawFirstFrame();
this.repl = repl({
...replOptions,
- onToggle: async (started) => {
+ onToggle: (started) => {
replOptions?.onToggle?.(started);
- const { scheduler } = await this.repl;
if (started) {
- this.drawer.start(scheduler);
+ this.adjustDrawTime();
+ this.drawer.start(this.repl.scheduler);
+ // stop other repls when this one is started
+ document.dispatchEvent(
+ new CustomEvent('start-repl', {
+ detail: this.id,
+ }),
+ );
} else {
this.drawer.stop();
+ updateMiniLocations(this.editor, []);
+ cleanupDraw(false);
}
},
beforeEval: async () => {
- await prebaked;
+ cleanupDraw();
+ this.painters = [];
+ await this.prebaked;
+ await replOptions?.beforeEval?.();
},
afterEval: (options) => {
+ // remember for when highlighting is toggled on
+ this.miniLocations = options.meta?.miniLocations;
+ this.widgets = options.meta?.widgets;
+ updateWidgets(this.editor, this.widgets);
+ updateMiniLocations(this.editor, this.miniLocations);
replOptions?.afterEval?.(options);
+ this.adjustDrawTime();
this.drawer.invalidate();
},
});
@@ -89,25 +187,145 @@ export class StrudelMirror {
root,
initialCode,
onChange: (v) => {
- this.code = v.state.doc.toString();
+ if (v.docChanged) {
+ this.code = v.state.doc.toString();
+ this.repl.setCode?.(this.code);
+ }
},
onEvaluate: () => this.evaluate(),
onStop: () => this.stop(),
});
+ const cmEditor = this.root.querySelector('.cm-editor');
+ if (cmEditor) {
+ this.root.style.display = 'block';
+ if (bgFill) {
+ this.root.style.backgroundColor = 'var(--background)';
+ }
+ cmEditor.style.backgroundColor = 'transparent';
+ }
+ const settings = codemirrorSettings.get();
+ this.setFontSize(settings.fontSize);
+ this.setFontFamily(settings.fontFamily);
+
+ // stop this repl when another repl is started
+ this.onStartRepl = (e) => {
+ if (e.detail !== this.id) {
+ this.stop();
+ }
+ };
+ document.addEventListener('start-repl', this.onStartRepl);
+ }
+ // adjusts draw time depending on if there are painters
+ adjustDrawTime() {
+ // when no painters are set, [0,0] is enough (just highlighting)
+ this.drawer.setDrawTime(this.painters.length ? this.drawTime : [0, 0]);
+ }
+ async drawFirstFrame() {
+ if (!this.onDraw) {
+ return;
+ }
+ // draw first frame instantly
+ await this.prebaked;
+ try {
+ await this.repl.evaluate(this.code, false);
+ this.drawer.invalidate(this.repl.scheduler, -0.001);
+ // draw at -0.001 to avoid haps at 0 to be visualized as active
+ this.onDraw?.(this.drawer.visibleHaps, -0.001, [], this.painters);
+ } catch (err) {
+ console.warn('first frame could not be painted');
+ }
}
async evaluate() {
- const { evaluate } = await this.repl;
this.flash();
- await evaluate(this.code);
+ await this.repl.evaluate(this.code);
}
async stop() {
- const { scheduler } = await this.repl;
- scheduler.stop();
+ this.repl.scheduler.stop();
+ }
+ async toggle() {
+ if (this.repl.scheduler.started) {
+ this.repl.stop();
+ } else {
+ this.evaluate();
+ }
}
flash(ms) {
flash(this.editor, ms);
}
highlight(haps, time) {
- highlightMiniLocations(this.editor.view, time, haps);
+ highlightMiniLocations(this.editor, time, haps);
+ }
+ setFontSize(size) {
+ this.root.style.fontSize = size + 'px';
+ }
+ setFontFamily(family) {
+ this.root.style.fontFamily = family;
+ const scroller = this.root.querySelector('.cm-scroller');
+ if (scroller) {
+ scroller.style.fontFamily = family;
+ }
+ }
+ reconfigureExtension(key, value) {
+ if (!extensions[key]) {
+ console.warn(`extension ${key} is not known`);
+ return;
+ }
+ value = parseBooleans(value);
+ const newValue = extensions[key](value, this);
+ this.editor.dispatch({
+ effects: compartments[key].reconfigure(newValue),
+ });
+ if (key === 'theme') {
+ activateTheme(value);
+ }
+ }
+ setLineWrappingEnabled(enabled) {
+ this.reconfigureExtension('isLineWrappingEnabled', enabled);
+ }
+ setLineNumbersDisplayed(enabled) {
+ this.reconfigureExtension('isLineNumbersDisplayed', enabled);
+ }
+ setTheme(theme) {
+ this.reconfigureExtension('theme', theme);
+ }
+ setAutocompletionEnabled(enabled) {
+ this.reconfigureExtension('isAutoCompletionEnabled', enabled);
+ }
+ updateSettings(settings) {
+ this.setFontSize(settings.fontSize);
+ this.setFontFamily(settings.fontFamily);
+ for (let key in extensions) {
+ this.reconfigureExtension(key, settings[key]);
+ }
+ const updated = { ...codemirrorSettings.get(), ...settings };
+ codemirrorSettings.set(updated);
+ }
+ changeSetting(key, value) {
+ if (extensions[key]) {
+ this.reconfigureExtension(key, value);
+ return;
+ } else if (key === 'fontFamily') {
+ this.setFontFamily(value);
+ } else if (key === 'fontSize') {
+ this.setFontSize(value);
+ }
+ }
+ setCode(code) {
+ const changes = { from: 0, to: this.editor.state.doc.length, insert: code };
+ this.editor.dispatch({ changes });
+ }
+ clear() {
+ this.onStartRepl && document.removeEventListener('start-repl', this.onStartRepl);
}
}
+
+function parseBooleans(value) {
+ return { true: true, false: false }[value] ?? value;
+}
+
+// helper function to generate repl ids
+function s4() {
+ return Math.floor((1 + Math.random()) * 0x10000)
+ .toString(16)
+ .substring(1);
+}
diff --git a/packages/codemirror/flash.mjs b/packages/codemirror/flash.mjs
index 9bc5c593..6b37038f 100644
--- a/packages/codemirror/flash.mjs
+++ b/packages/codemirror/flash.mjs
@@ -33,3 +33,5 @@ export const flash = (view, ms = 200) => {
view.dispatch({ effects: setFlash.of(false) });
}, ms);
};
+
+export const isFlashEnabled = (on) => (on ? flashField : []);
diff --git a/packages/codemirror/highlight.mjs b/packages/codemirror/highlight.mjs
index 317c5fdf..79724f8f 100644
--- a/packages/codemirror/highlight.mjs
+++ b/packages/codemirror/highlight.mjs
@@ -124,3 +124,12 @@ const miniLocationHighlights = EditorView.decorations.compute([miniLocations, vi
});
export const highlightExtension = [miniLocations, visibleMiniLocations, miniLocationHighlights];
+
+export const isPatternHighlightingEnabled = (on, config) => {
+ on &&
+ config &&
+ setTimeout(() => {
+ updateMiniLocations(config.editor, config.miniLocations);
+ }, 100);
+ return on ? highlightExtension : [];
+};
diff --git a/packages/codemirror/html.mjs b/packages/codemirror/html.mjs
new file mode 100644
index 00000000..527275ef
--- /dev/null
+++ b/packages/codemirror/html.mjs
@@ -0,0 +1,17 @@
+const parser = typeof DOMParser !== 'undefined' ? new DOMParser() : null;
+export let html = (string) => {
+ return parser?.parseFromString(string, 'text/html').querySelectorAll('*');
+};
+let parseChunk = (chunk) => {
+ if (Array.isArray(chunk)) return chunk.flat().join('');
+ if (chunk === undefined) return '';
+ return chunk;
+};
+export let h = (strings, ...vars) => {
+ let string = '';
+ for (let i in strings) {
+ string += parseChunk(strings[i]);
+ string += parseChunk(vars[i]);
+ }
+ return html(string);
+};
diff --git a/packages/codemirror/index.mjs b/packages/codemirror/index.mjs
index c847c32c..8f2d1630 100644
--- a/packages/codemirror/index.mjs
+++ b/packages/codemirror/index.mjs
@@ -2,3 +2,4 @@ export * from './codemirror.mjs';
export * from './highlight.mjs';
export * from './flash.mjs';
export * from './slider.mjs';
+export * from './themes.mjs';
diff --git a/packages/codemirror/keybindings.mjs b/packages/codemirror/keybindings.mjs
new file mode 100644
index 00000000..6fe00eda
--- /dev/null
+++ b/packages/codemirror/keybindings.mjs
@@ -0,0 +1,31 @@
+import { Prec } from '@codemirror/state';
+import { keymap, ViewPlugin } from '@codemirror/view';
+// import { searchKeymap } from '@codemirror/search';
+import { emacs } from '@replit/codemirror-emacs';
+import { vim } from '@replit/codemirror-vim';
+import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
+import { defaultKeymap, historyKeymap } from '@codemirror/commands';
+
+const vscodePlugin = ViewPlugin.fromClass(
+ class {
+ constructor() {}
+ },
+ {
+ provide: () => {
+ return Prec.highest(keymap.of([...vscodeKeymap]));
+ },
+ },
+);
+const vscodeExtension = (options) => [vscodePlugin].concat(options ?? []);
+
+const keymaps = {
+ vim,
+ emacs,
+ vscode: vscodeExtension,
+};
+
+export function keybindings(name) {
+ const active = keymaps[name];
+ return [keymap.of(defaultKeymap), keymap.of(historyKeymap), active ? active() : []];
+ // keymap.of(searchKeymap),
+}
diff --git a/packages/codemirror/package.json b/packages/codemirror/package.json
index 4e443648..8810a607 100644
--- a/packages/codemirror/package.json
+++ b/packages/codemirror/package.json
@@ -33,13 +33,22 @@
},
"homepage": "https://github.com/tidalcycles/strudel#readme",
"dependencies": {
+ "@codemirror/autocomplete": "^6.6.0",
"@codemirror/commands": "^6.2.4",
"@codemirror/lang-javascript": "^6.1.7",
"@codemirror/language": "^6.6.0",
+ "@codemirror/search": "^6.0.0",
"@codemirror/state": "^6.2.0",
"@codemirror/view": "^6.10.0",
"@lezer/highlight": "^1.1.4",
- "@strudel.cycles/core": "workspace:*"
+ "@replit/codemirror-emacs": "^6.0.1",
+ "@replit/codemirror-vim": "^6.0.14",
+ "@replit/codemirror-vscode-keymap": "^6.0.2",
+ "@strudel.cycles/core": "workspace:*",
+ "@uiw/codemirror-themes": "^4.19.16",
+ "@uiw/codemirror-themes-all": "^4.19.16",
+ "nanostores": "^0.8.1",
+ "@nanostores/persistent": "^0.8.0"
},
"devDependencies": {
"vite": "^4.3.3"
diff --git a/website/src/repl/themes.mjs b/packages/codemirror/themes.mjs
similarity index 86%
rename from website/src/repl/themes.mjs
rename to packages/codemirror/themes.mjs
index bee95fd1..ee3e05bf 100644
--- a/website/src/repl/themes.mjs
+++ b/packages/codemirror/themes.mjs
@@ -30,13 +30,13 @@ import {
xcodeLight,
} from '@uiw/codemirror-themes-all';
-import strudelTheme from '@strudel.cycles/react/src/themes/strudel-theme';
-import bluescreen, { settings as bluescreenSettings } from '@strudel.cycles/react/src/themes/bluescreen';
-import blackscreen, { settings as blackscreenSettings } from '@strudel.cycles/react/src/themes/blackscreen';
-import whitescreen, { settings as whitescreenSettings } from '@strudel.cycles/react/src/themes/whitescreen';
-import teletext, { settings as teletextSettings } from '@strudel.cycles/react/src/themes/teletext';
-import algoboy, { settings as algoboySettings } from '@strudel.cycles/react/src/themes/algoboy';
-import terminal, { settings as terminalSettings } from '@strudel.cycles/react/src/themes/terminal';
+import strudelTheme from './themes/strudel-theme';
+import bluescreen, { settings as bluescreenSettings } from './themes/bluescreen';
+import blackscreen, { settings as blackscreenSettings } from './themes/blackscreen';
+import whitescreen, { settings as whitescreenSettings } from './themes/whitescreen';
+import teletext, { settings as teletextSettings } from './themes/teletext';
+import algoboy, { settings as algoboySettings } from './themes/algoboy';
+import terminal, { settings as terminalSettings } from './themes/terminal';
export const themes = {
strudelTheme,
@@ -473,6 +473,9 @@ function stringifySafe(json) {
return JSON.stringify(json, getCircularReplacer());
}
+export const theme = (theme) => themes[theme] || themes.strudelTheme;
+
+// css style injection helpers
export function injectStyle(rule) {
const newStyle = document.createElement('style');
document.head.appendChild(newStyle);
@@ -480,3 +483,45 @@ export function injectStyle(rule) {
const ruleIndex = styleSheet.insertRule(rule, 0);
return () => styleSheet.deleteRule(ruleIndex);
}
+
+let currentTheme,
+ resetThemeStyle,
+ themeStyle,
+ styleID = 'strudel-theme-vars';
+export function initTheme(theme) {
+ if (!document.getElementById(styleID)) {
+ themeStyle = document.createElement('style');
+ themeStyle.id = styleID;
+ document.head.append(themeStyle);
+ }
+ activateTheme(theme);
+}
+
+export function activateTheme(name) {
+ if (currentTheme === name) {
+ return;
+ }
+ currentTheme = name;
+ if (!settings[name]) {
+ console.warn('theme', name, 'has no settings.. defaulting to strudelTheme settings');
+ }
+ const themeSettings = settings[name] || settings.strudelTheme;
+ // set css variables
+ themeStyle.innerHTML = `:root {
+ ${Object.entries(themeSettings)
+ // important to override fallback
+ .map(([key, value]) => `--${key}: ${value} !important;`)
+ .join('\n')}
+ }`;
+ // tailwind dark mode
+ if (themeSettings.light) {
+ document.documentElement.classList.remove('dark');
+ } else {
+ document.documentElement.classList.add('dark');
+ }
+ resetThemeStyle?.();
+ resetThemeStyle = undefined;
+ if (themeSettings.customStyle) {
+ resetThemeStyle = injectStyle(themeSettings.customStyle);
+ }
+}
diff --git a/packages/react/src/themes/algoboy.js b/packages/codemirror/themes/algoboy.mjs
similarity index 100%
rename from packages/react/src/themes/algoboy.js
rename to packages/codemirror/themes/algoboy.mjs
diff --git a/packages/react/src/themes/blackscreen.js b/packages/codemirror/themes/blackscreen.mjs
similarity index 100%
rename from packages/react/src/themes/blackscreen.js
rename to packages/codemirror/themes/blackscreen.mjs
diff --git a/packages/react/src/themes/bluescreen.js b/packages/codemirror/themes/bluescreen.mjs
similarity index 100%
rename from packages/react/src/themes/bluescreen.js
rename to packages/codemirror/themes/bluescreen.mjs
diff --git a/packages/codemirror/themes/one-dark.mjs b/packages/codemirror/themes/one-dark.mjs
deleted file mode 100644
index cce83699..00000000
--- a/packages/codemirror/themes/one-dark.mjs
+++ /dev/null
@@ -1,139 +0,0 @@
-import { EditorView } from '@codemirror/view';
-import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
-import { tags as t } from '@lezer/highlight';
-
-// Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors
-
-const chalky = '#e5c07b',
- coral = '#e06c75',
- cyan = '#56b6c2',
- invalid = '#ffffff',
- ivory = '#abb2bf',
- stone = '#7d8799', // Brightened compared to original to increase contrast
- malibu = '#61afef',
- sage = '#98c379',
- whiskey = '#d19a66',
- violet = '#c678dd',
- darkBackground = '#21252b',
- highlightBackground = '#2c313a',
- background = '#282c34',
- tooltipBackground = '#353a42',
- selection = '#3E4451',
- cursor = '#528bff';
-
-/// The colors used in the theme, as CSS color strings.
-export const color = {
- chalky,
- coral,
- cyan,
- invalid,
- ivory,
- stone,
- malibu,
- sage,
- whiskey,
- violet,
- darkBackground,
- highlightBackground,
- background,
- tooltipBackground,
- selection,
- cursor,
-};
-
-/// The editor theme styles for One Dark.
-export const oneDarkTheme = EditorView.theme(
- {
- '&': {
- color: ivory,
- backgroundColor: background,
- },
-
- '.cm-content': {
- caretColor: cursor,
- },
-
- '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
- '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':
- { backgroundColor: selection },
-
- '.cm-panels': { backgroundColor: darkBackground, color: ivory },
- '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
- '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
-
- '.cm-searchMatch': {
- backgroundColor: '#72a1ff59',
- outline: '1px solid #457dff',
- },
- '.cm-searchMatch.cm-searchMatch-selected': {
- backgroundColor: '#6199ff2f',
- },
-
- '.cm-activeLine': { backgroundColor: '#6699ff0b' },
- '.cm-selectionMatch': { backgroundColor: '#aafe661a' },
-
- '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
- backgroundColor: '#bad0f847',
- },
-
- '.cm-gutters': {
- backgroundColor: background,
- color: stone,
- border: 'none',
- },
-
- '.cm-activeLineGutter': {
- backgroundColor: highlightBackground,
- },
-
- '.cm-foldPlaceholder': {
- backgroundColor: 'transparent',
- border: 'none',
- color: '#ddd',
- },
-
- '.cm-tooltip': {
- border: 'none',
- backgroundColor: tooltipBackground,
- },
- '.cm-tooltip .cm-tooltip-arrow:before': {
- borderTopColor: 'transparent',
- borderBottomColor: 'transparent',
- },
- '.cm-tooltip .cm-tooltip-arrow:after': {
- borderTopColor: tooltipBackground,
- borderBottomColor: tooltipBackground,
- },
- '.cm-tooltip-autocomplete': {
- '& > ul > li[aria-selected]': {
- backgroundColor: highlightBackground,
- color: ivory,
- },
- },
- },
- { dark: true },
-);
-
-/// The highlighting style for code in the One Dark theme.
-export const oneDarkHighlightStyle = HighlightStyle.define([
- { tag: t.keyword, color: violet },
- { tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], color: coral },
- { tag: [t.function(t.variableName), t.labelName], color: malibu },
- { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: whiskey },
- { tag: [t.definition(t.name), t.separator], color: ivory },
- { tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: chalky },
- { tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)], color: cyan },
- { tag: [t.meta, t.comment], color: stone },
- { tag: t.strong, fontWeight: 'bold' },
- { tag: t.emphasis, fontStyle: 'italic' },
- { tag: t.strikethrough, textDecoration: 'line-through' },
- { tag: t.link, color: stone, textDecoration: 'underline' },
- { tag: t.heading, fontWeight: 'bold', color: coral },
- { tag: [t.atom, t.bool, t.special(t.variableName)], color: whiskey },
- { tag: [t.processingInstruction, t.string, t.inserted], color: sage },
- { tag: t.invalid, color: invalid },
-]);
-
-/// Extension to enable the One Dark theme (both the editor theme and
-/// the highlight style).
-export const oneDark = [oneDarkTheme, syntaxHighlighting(oneDarkHighlightStyle)];
diff --git a/packages/react/src/themes/strudel-theme.js b/packages/codemirror/themes/strudel-theme.mjs
similarity index 100%
rename from packages/react/src/themes/strudel-theme.js
rename to packages/codemirror/themes/strudel-theme.mjs
diff --git a/packages/react/src/themes/teletext.js b/packages/codemirror/themes/teletext.mjs
similarity index 100%
rename from packages/react/src/themes/teletext.js
rename to packages/codemirror/themes/teletext.mjs
diff --git a/packages/react/src/themes/terminal.js b/packages/codemirror/themes/terminal.mjs
similarity index 100%
rename from packages/react/src/themes/terminal.js
rename to packages/codemirror/themes/terminal.mjs
diff --git a/packages/react/src/themes/whitescreen.js b/packages/codemirror/themes/whitescreen.mjs
similarity index 100%
rename from packages/react/src/themes/whitescreen.js
rename to packages/codemirror/themes/whitescreen.mjs
diff --git a/packages/react/src/components/Tooltip.jsx b/packages/codemirror/tooltip.mjs
similarity index 66%
rename from packages/react/src/components/Tooltip.jsx
rename to packages/codemirror/tooltip.mjs
index 43a53476..f67e6d14 100644
--- a/packages/react/src/components/Tooltip.jsx
+++ b/packages/codemirror/tooltip.mjs
@@ -1,32 +1,33 @@
-import { createRoot } from 'react-dom/client';
import { hoverTooltip } from '@codemirror/view';
-import jsdoc from '../../../../doc.json';
-import { Autocomplete } from './Autocomplete';
+import jsdoc from '../../doc.json';
+import { Autocomplete } from './autocomplete.mjs';
const getDocLabel = (doc) => doc.name || doc.longname;
let ctrlDown = false;
-// Record Control key event to trigger or block the tooltip depending on the state
-window.addEventListener(
- 'keyup',
- function (e) {
- if (e.key == 'Control') {
- ctrlDown = false;
- }
- },
- true,
-);
+if (typeof window !== 'undefined') {
+ // Record Control key event to trigger or block the tooltip depending on the state
+ window.addEventListener(
+ 'keyup',
+ function (e) {
+ if (e.key == 'Control') {
+ ctrlDown = false;
+ }
+ },
+ true,
+ );
-window.addEventListener(
- 'keydown',
- function (e) {
- if (e.key == 'Control') {
- ctrlDown = true;
- }
- },
- true,
-);
+ window.addEventListener(
+ 'keydown',
+ function (e) {
+ if (e.key == 'Control') {
+ ctrlDown = true;
+ }
+ },
+ true,
+ );
+}
export const strudelTooltip = hoverTooltip(
(view, pos, side) => {
@@ -65,10 +66,13 @@ export const strudelTooltip = hoverTooltip(
create(view) {
let dom = document.createElement('div');
dom.className = 'strudel-tooltip';
- createRoot(dom).render({synonyms.join(', ')}
-
- )}
-
- {
- navigator.clipboard.writeText(example);
- e.stopPropagation();
- }}
- >
- {example}
-
-