starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-18 07:24:07 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Vendor basicSetup

Browse Source
This commit is contained in:
Gregory Schier
2023-02-24 14:51:56 -08:00
parent 2d83a536b9
commit b3795d99b5
4 changed files with 159 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
package-lock.json generated
View File

@@ -8,9 +8,11 @@
"name": "tauri-app",
"version": "0.0.0",
"dependencies": {
"@codemirror/commands": "^6.2.1",
"@codemirror/lang-html": "^6.4.2",
"@codemirror/lang-javascript": "^6.1.4",
"@codemirror/lang-json": "^6.0.1",
"@codemirror/search": "^6.2.3",
"@radix-ui/react-dropdown-menu": "^2.0.2",
"@radix-ui/react-icons": "^1.2.0",
"@radix-ui/react-popover": "1.0.3",
@@ -429,6 +431,17 @@
"@lezer/common": "^1.0.0"
}
},
"node_modules/@codemirror/commands": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.2.1.tgz",
"integrity": "sha512-FFiNKGuHA5O8uC6IJE5apI5rT9gyjlw4whqy4vlcX0wE/myxL6P1s0upwDhY4HtMWLOwzwsp0ap3bjdQhvfDOA==",
"dependencies": {
"@codemirror/language": "^6.0.0",
"@codemirror/state": "^6.2.0",
"@codemirror/view": "^6.0.0",
"@lezer/common": "^1.0.0"
}
},
"node_modules/@codemirror/lang-css": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.0.2.tgz",
@@ -502,6 +515,16 @@
"crelt": "^1.0.5"
}
},
"node_modules/@codemirror/search": {
"version": "6.2.3",
"resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.2.3.tgz",
"integrity": "sha512-V9n9233lopQhB1dyjsBK2Wc1i+8hcCqxl1wQ46c5HWWLePoe4FluV3TGHoZ04rBRlGjNyz9DTmpJErig8UE4jw==",
"dependencies": {
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"crelt": "^1.0.5"
}
},
"node_modules/@codemirror/state": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.2.0.tgz",
@@ -2752,27 +2775,6 @@
"@codemirror/view": "^6.0.0"
}
},
"node_modules/codemirror/node_modules/@codemirror/commands": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.2.1.tgz",
"integrity": "sha512-FFiNKGuHA5O8uC6IJE5apI5rT9gyjlw4whqy4vlcX0wE/myxL6P1s0upwDhY4HtMWLOwzwsp0ap3bjdQhvfDOA==",
"dependencies": {
"@codemirror/language": "^6.0.0",
"@codemirror/state": "^6.2.0",
"@codemirror/view": "^6.0.0",
"@lezer/common": "^1.0.0"
}
},
"node_modules/codemirror/node_modules/@codemirror/search": {
"version": "6.2.3",
"resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.2.3.tgz",
"integrity": "sha512-V9n9233lopQhB1dyjsBK2Wc1i+8hcCqxl1wQ46c5HWWLePoe4FluV3TGHoZ04rBRlGjNyz9DTmpJErig8UE4jw==",
"dependencies": {
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"crelt": "^1.0.5"
}
},
"node_modules/color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -6615,6 +6617,17 @@
"@lezer/common": "^1.0.0"
}
},
"@codemirror/commands": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.2.1.tgz",
"integrity": "sha512-FFiNKGuHA5O8uC6IJE5apI5rT9gyjlw4whqy4vlcX0wE/myxL6P1s0upwDhY4HtMWLOwzwsp0ap3bjdQhvfDOA==",
"requires": {
"@codemirror/language": "^6.0.0",
"@codemirror/state": "^6.2.0",
"@codemirror/view": "^6.0.0",
"@lezer/common": "^1.0.0"
}
},
"@codemirror/lang-css": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.0.2.tgz",
@@ -6688,6 +6701,16 @@
"crelt": "^1.0.5"
}
},
"@codemirror/search": {
"version": "6.2.3",
"resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.2.3.tgz",
"integrity": "sha512-V9n9233lopQhB1dyjsBK2Wc1i+8hcCqxl1wQ46c5HWWLePoe4FluV3TGHoZ04rBRlGjNyz9DTmpJErig8UE4jw==",
"requires": {
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"crelt": "^1.0.5"
}
},
"@codemirror/state": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.2.0.tgz",
@@ -8164,29 +8187,6 @@
"@codemirror/search": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0"
},
"dependencies": {
"@codemirror/commands": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.2.1.tgz",
"integrity": "sha512-FFiNKGuHA5O8uC6IJE5apI5rT9gyjlw4whqy4vlcX0wE/myxL6P1s0upwDhY4HtMWLOwzwsp0ap3bjdQhvfDOA==",
"requires": {
"@codemirror/language": "^6.0.0",
"@codemirror/state": "^6.2.0",
"@codemirror/view": "^6.0.0",
"@lezer/common": "^1.0.0"
}
},
"@codemirror/search": {
"version": "6.2.3",
"resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.2.3.tgz",
"integrity": "sha512-V9n9233lopQhB1dyjsBK2Wc1i+8hcCqxl1wQ46c5HWWLePoe4FluV3TGHoZ04rBRlGjNyz9DTmpJErig8UE4jw==",
"requires": {
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"crelt": "^1.0.5"
}
}
}
},
"color-convert": {

2
package.json
View File

@@ -12,9 +12,11 @@
"tauri-build": "tauri build"
},
"dependencies": {
"@codemirror/commands": "^6.2.1",
"@codemirror/lang-html": "^6.4.2",
"@codemirror/lang-javascript": "^6.1.4",
"@codemirror/lang-json": "^6.0.1",
"@codemirror/search": "^6.2.3",
"@radix-ui/react-dropdown-menu": "^2.0.2",
"@radix-ui/react-icons": "^1.2.0",
"@radix-ui/react-popover": "1.0.3",

42
src-web/components/Editor/Editor.css
View File

@@ -36,9 +36,51 @@
.cm-editor .cm-gutters {
background-color: hsl(var(--color-gray-50));
border-right: 0;
color: hsl(var(--color-gray-200));
}
.cm-editor .fold-gutter-icon {
height: 1.5em;
padding-top: 0.2em;
padding-left: 0.4em;
padding-right: 0.4em;
cursor: pointer;
border-radius: 0.2em;
}
.cm-editor .fold-gutter-icon::after {
display: block;
width: 0.5em;
height: 0.5em;
border: 1px solid transparent;
border-left-color: currentColor;
border-bottom-color: currentColor;
transform: rotate(-45deg);
content: "";
}
.cm-editor .fold-gutter-icon[data-open] {
padding-top: 0.4em;
padding-left: 0.2em;
}
.cm-editor .fold-gutter-icon[data-open]::after {
transform: rotate(-135deg);
}
.cm-editor .fold-gutter-icon:hover {
background-color: hsl(var(--color-gray-100)/0.2);
color: hsl(var(--color-gray-400));
}
.cm-editor.cm-focused .cm-gutters {
color: hsl(var(--color-gray-300));
}
.cm-editor .cm-content {
padding-top: 0.4rem;
}
.cm-editor .cm-foldPlaceholder {
background-color: hsl(var(--color-gray-100));
border: 1px solid hsl(var(--color-gray-200));

75
src-web/hooks/useCodemirror.ts
View File

@@ -1,11 +1,40 @@
import { useEffect, useRef, useState } from 'react';
import { EditorView, basicSetup } from 'codemirror';
import { EditorView } from 'codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { json } from '@codemirror/lang-json';
import { html } from '@codemirror/lang-html';
import { EditorState } from '@codemirror/state';
import { tags } from '@lezer/highlight';
import { HighlightStyle, LanguageSupport, syntaxHighlighting } from '@codemirror/language';
import {
bracketMatching,
defaultHighlightStyle,
foldGutter,
foldKeymap,
HighlightStyle,
indentOnInput,
LanguageSupport,
syntaxHighlighting,
} from '@codemirror/language';
import {
crosshairCursor,
drawSelection,
dropCursor,
highlightActiveLine,
highlightActiveLineGutter,
highlightSpecialChars,
keymap,
lineNumbers,
rectangularSelection,
} from '@codemirror/view';
import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
import {
autocompletion,
closeBrackets,
closeBracketsKeymap,
completionKeymap,
} from '@codemirror/autocomplete';
import { lintKeymap } from '@codemirror/lint';
import { EditorState } from '@codemirror/state';
const myHighlightStyle = HighlightStyle.define([
{
@@ -26,7 +55,45 @@ const syntaxExtensions: Record<string, LanguageSupport> = {
'text/html': html(),
};
const extensions = [basicSetup, syntaxHighlighting(myHighlightStyle)];
const extensions = [
lineNumbers(),
highlightActiveLineGutter(),
highlightSpecialChars(),
history(),
foldGutter({
markerDOM: (open) => {
const el = document.createElement('div');
el.classList.add('fold-gutter-icon');
el.tabIndex = -1;
if (open) {
el.setAttribute('data-open', '');
}
return el;
},
}),
drawSelection(),
dropCursor(),
EditorState.allowMultipleSelections.of(true),
indentOnInput(),
syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
bracketMatching(),
closeBrackets(),
autocompletion(),
rectangularSelection(),
crosshairCursor(),
highlightActiveLine(),
highlightSelectionMatches(),
keymap.of([
...closeBracketsKeymap,
...defaultKeymap,
...searchKeymap,
...historyKeymap,
...foldKeymap,
...completionKeymap,
...lintKeymap,
]),
syntaxHighlighting(myHighlightStyle),
];
export default function useCodeMirror({
value,