${removeLastCommaAndSpace( + body, + )}${needsFunctionalSyntaxRewrite ? ')' : ''}${ + maybeComment ? makeComment(maybeComment) : '' + }${maybeReturnTypeComment}
`; +}; diff --git a/plugins/codemirror-lang-csound/src/index.d.ts b/plugins/codemirror-lang-csound/src/index.d.ts new file mode 100644 index 00000000..bbab69d2 --- /dev/null +++ b/plugins/codemirror-lang-csound/src/index.d.ts @@ -0,0 +1,4 @@ +declare module '*.json' { + const value: any; + export default value; +} diff --git a/plugins/codemirror-lang-csound/src/index.ts b/plugins/codemirror-lang-csound/src/index.ts new file mode 100644 index 00000000..0838d0b9 --- /dev/null +++ b/plugins/codemirror-lang-csound/src/index.ts @@ -0,0 +1,353 @@ +import { + LRLanguage, + LanguageSupport, + foldNodeProp, + foldInside, + indentUnit, + indentNodeProp, + syntaxTree, +} from '@codemirror/language'; +import { completeFromList, ifIn } from '@codemirror/autocomplete'; +import { SyntaxNode, TreeCursor } from '@lezer/common'; +import { + PanelConstructor, + ViewPlugin, + showPanel, + EditorView, +} from '@codemirror/view'; +import { Extension } from '@codemirror/state'; +import { + csoundTags, + defaultCsoundLightTheme, + htmlizeSynopsis, + variableHighlighter, +} from './highlighter'; +import { parser as csdParser } from './csd.grammar'; +import { parser as orcParser } from './orc.grammar'; +import { parser as scoParser } from './sco.grammar'; +import { builtinOpcodes } from './parser-utils'; + +const csoundModePlugin: Extension = ViewPlugin.fromClass( + class { + public view: EditorView; + constructor(view: EditorView) { + this.view = view; + } + get decorations() { + return variableHighlighter(this.view); + } + }, + { + decorations: ({ view }: { view: EditorView }) => { + return variableHighlighter(view) as any; + }, + }, +); + +type LineReducer = { + cand: string | undefined; + stop: boolean; + lastComma: boolean; +}; + +const findOperatorName = (view: EditorView, tree: TreeCursor) => { + const treeRoot = tree.node; + let maybeArgList: SyntaxNode | null = treeRoot; + let maybeArgListNode: SyntaxNode | null = tree.node; + + while (maybeArgList && maybeArgList.type.name !== 'ArgList') { + maybeArgListNode = maybeArgList?.node?.parent ?? maybeArgList.node; + maybeArgList = maybeArgList.node.parent; + } + + if ( + maybeArgList && + maybeArgList.node?.parent?.type.name === 'CallbackExpression' + ) { + const tokenSlice = view.state.doc.slice( + maybeArgList.node.parent.from, + maybeArgList.node.parent.to, + ); + + const tokenFull = (tokenSlice as any).text[0].replace(/\(.*/, ''); + + const token = tokenFull.replace(/:.*/, ''); + const explicitRate = + tokenFull.indexOf(':') > -1 + ? tokenFull.replace(/.*:/, '').replace(/ /g, '') + : undefined; + + return { + token, + explicitRate, + statement: tokenSlice, + treeNode: maybeArgListNode.node.parent?.node ?? null, + }; + } + + let maybeOpcodeStatement: SyntaxNode | null = treeRoot; + let maybeOpcodeStatementNode: SyntaxNode | null = treeRoot; + + while ( + maybeOpcodeStatement && + maybeOpcodeStatement.type.name !== 'OpcodeStatement' + ) { + maybeOpcodeStatementNode = + maybeOpcodeStatement?.node?.parent ?? maybeOpcodeStatement.node; + maybeOpcodeStatement = maybeOpcodeStatement.node.parent; + } + + if (maybeOpcodeStatement) { + const tokenSlice = view.state.doc.slice( + maybeOpcodeStatement.from, + maybeOpcodeStatement.to, + ); + + const splitStatement = (tokenSlice as any).text[0].split(/\s/); + const result = splitStatement.reduce( + ({ cand, stop, lastComma }: LineReducer, curr: string) => { + if (stop) { + return { + cand, + stop, + lastComma, + }; + } else { + if (curr.includes(',')) { + return { + cand: undefined, + stop: false, + lastComma: true, + }; + } else if (lastComma) { + return { + cand: undefined, + stop: false, + lastComma: false, + }; + } else { + const tokenExists = builtinOpcodes[curr] !== undefined; + + return tokenExists + ? { cand: curr, stop: true, lastComma: true } + : { cand, stop: false, lastComma: false }; + } + } + }, + { cand: undefined, stop: false, lastComma: false } as LineReducer, + ); + + return { + token: result.cand, + statement: tokenSlice, + treeNode: maybeOpcodeStatementNode, + }; + } + + return {}; +}; + +const csoundInfoPanel: PanelConstructor = (view: EditorView) => { + const dom = document.createElement('div'); + + return { + dom, + destroy() { + dom.remove(); + }, + update(update) { + if (update.heightChanged || update.selectionSet) { + const isEmptyLine = + view.lineBlockAt(view.state.selection.main.to).length < 2; + if (isEmptyLine) { + dom.innerHTML = ''; + return; + } + const treeRoot = syntaxTree(view.state).cursorAt( + view.state.selection.main.head, + ); + const { token: operatorName, explicitRate } = findOperatorName( + view, + treeRoot, + ); + const synopsis = operatorName && builtinOpcodes[operatorName]; + const hasSynopsis = + Boolean(synopsis) && + Array.isArray(synopsis.synopsis) && + synopsis.synopsis.length > 0; + if (hasSynopsis) { + let isFunctionSyntax = false; + let foundExpressionType = false; + let currentNode = treeRoot.node.parent; + + while (!foundExpressionType && currentNode) { + if ( + ['CallbackExpression', 'ArgList'].includes( + currentNode.type.name || '', + ) + ) { + isFunctionSyntax = true; + foundExpressionType = true; + } else if (currentNode.type.name === 'OpcodeStatement') { + isFunctionSyntax = false; + foundExpressionType = true; + } + currentNode = currentNode.parent; + } + + let resolvedSynopsis = synopsis.synopsis[0]; + if (explicitRate && Array.isArray(synopsis.synopsis)) { + for (const synop of synopsis.synopsis) { + if (synop.startsWith(explicitRate)) { + resolvedSynopsis = synop; + } + } + } + + dom.innerHTML = htmlizeSynopsis( + resolvedSynopsis, + operatorName, + isFunctionSyntax, + ); + } else { + dom.innerHTML = ''; + } + } + }, + }; +}; + +const csoundInfo = () => { + return showPanel.of(csoundInfoPanel); +}; + +function foldInstrInside( + node: SyntaxNode, +): { from: number; to: number } | null { + let first = node.firstChild; + if (first?.nextSibling) { + first = first.nextSibling; + } + const last = node.lastChild; + return first && first.to < last!.from + ? { from: first.to, to: last!.type.isError ? node.to : last!.from } + : null; +} + +export const csdLanguage = LRLanguage.define({ + parser: csdParser.configure({ + props: [ + csoundTags, + indentNodeProp.add({ + InstrumentDeclaration: (context) => + context.column(context.node.from) + context.unit, + UdoDeclaration: (context) => + context.column(context.node.from) + context.unit, + ControlFlowStatement: (context) => + context.column(context.node.from) + context.unit, + }), + foldNodeProp.add({ + InstrumentDeclaration: foldInstrInside, + UdoDeclaration: foldInstrInside, + FoldableScoreStatement: foldInside, + }), + ], + }), + languageData: { + closeBrackets: { brackets: ['(', '[', '{', "'", '"'] }, + commentTokens: { line: '//', block: { open: '/*', close: '*/' } }, + }, +}); + +export const orcLanguage = LRLanguage.define({ + parser: orcParser.configure({ + props: [ + csoundTags, + indentNodeProp.add({ + InstrumentDeclaration: (context) => + context.column(context.node.from) + context.unit, + UdoDeclaration: (context) => + context.column(context.node.from) + context.unit, + ControlFlowStatement: (context) => + context.column(context.node.from) + context.unit, + }), + foldNodeProp.add({ + InstrumentDeclaration: foldInstrInside, + UdoDeclaration: foldInstrInside, + }), + ], + }), + + languageData: { + closeBrackets: { brackets: ['(', '[', '{', "'", '"'] }, + commentTokens: { line: '//', block: { open: '/*', close: '*/' } }, + }, +}); + +export const scoLanguage = LRLanguage.define({ + parser: scoParser.configure({ + props: [ + csoundTags, + foldNodeProp.add({ + FoldableScoreStatement: foldInside, + }), + ], + }), + languageData: { + closeBrackets: { brackets: ['(', '[', '{', "'", '"'] }, + commentTokens: { line: '//', block: { open: '/*', close: '*/' } }, + }, +}); + +//, +// const orchestraAutocompletion = autocompletion({ +// activateOnTyping: true, +// selectOnOpen: true, +// }); + +const completionList = csdLanguage.data.of({ + autocomplete: ifIn( + ['Orchestra'], + completeFromList(Object.keys(builtinOpcodes)), + ), +}); + +interface CsoundModeOptions { + enableCompletion?: boolean; + enableSynopsis?: boolean; + enableDefaultTheme?: boolean; + fileType?: 'csd' | 'orc' | 'sco'; +} + +export function csoundMode(options?: CsoundModeOptions) { + const { + fileType = 'csd', + enableSynopsis = true, + enableCompletion = true, + enableDefaultTheme = true, + } = options || {}; + let selectedLanguageVariant = csdLanguage; + const features = [csoundModePlugin, indentUnit.of(' ')]; + + if (enableSynopsis) { + features.push(csoundInfo()); + } + + if (enableCompletion) { + features.push(completionList); + } + + if (enableDefaultTheme) { + features.push(defaultCsoundLightTheme); + } + + if (fileType === 'orc') { + selectedLanguageVariant = orcLanguage; + } + + if (fileType === 'sco') { + selectedLanguageVariant = scoLanguage; + } + + return new LanguageSupport(selectedLanguageVariant, features); +} diff --git a/plugins/codemirror-lang-csound/src/orc.grammar b/plugins/codemirror-lang-csound/src/orc.grammar new file mode 100644 index 00000000..d0737a30 --- /dev/null +++ b/plugins/codemirror-lang-csound/src/orc.grammar @@ -0,0 +1,4 @@ +@top ORC { Orchestra } + + +// APPEND CSD RULES \ No newline at end of file diff --git a/plugins/codemirror-lang-csound/src/orc.grammar.d.ts b/plugins/codemirror-lang-csound/src/orc.grammar.d.ts new file mode 100644 index 00000000..c5ad6e24 --- /dev/null +++ b/plugins/codemirror-lang-csound/src/orc.grammar.d.ts @@ -0,0 +1,4 @@ +import { LRParser } from '@lezer/lr'; + +declare const parser: LRParser; +export { parser }; diff --git a/plugins/codemirror-lang-csound/src/parser-utils.ts b/plugins/codemirror-lang-csound/src/parser-utils.ts new file mode 100644 index 00000000..4b14b76d --- /dev/null +++ b/plugins/codemirror-lang-csound/src/parser-utils.ts @@ -0,0 +1,90 @@ +import { EditorView } from '@codemirror/view'; +import { SyntaxNode } from '@lezer/common'; +import * as builtinOpcodesStar from './builtin-opcodes.json'; + +export const builtinOpcodes: Record< + string, + { synopsis: string[]; short_desc: string } +> = builtinOpcodesStar; + +function tokenExists(opname: string) { + return builtinOpcodes[opname] !== undefined; +} + +export const isGlobalConstant = (token: string) => { + return ['sr', 'kr', 'ksmps', '0dbfs', 'nchnls', 'nchnls_i'].includes(token); +}; + +function resolveOpcodeStatement(view: EditorView, node: SyntaxNode) { + let operator; + let currentNode = node.firstChild; + const inputArgs = []; + const outputArgs = []; + + if (node && node.prevSibling && node.prevSibling.type.name === 'AssignOp') { + let leftSideNode = node.parent?.node.firstChild ?? null; + + while (leftSideNode && leftSideNode.type.name !== 'AssignOp') { + const tokenSlice = view.state.sliceDoc( + leftSideNode.from, + leftSideNode.to, + ); + + inputArgs.push(tokenSlice); + leftSideNode = leftSideNode.nextSibling; + } + } + + while (currentNode) { + const currentNodeType = currentNode.type.name; + const tokenSlice = view.state.sliceDoc(currentNode.from, currentNode.to); + + if (!operator) { + if (tokenExists(tokenSlice)) { + operator = tokenSlice; + } else { + inputArgs.push(tokenSlice); + } + } else { + if (currentNodeType !== 'LineComment') { + outputArgs.push(tokenSlice); + } + } + // console.log({ currentNodeType, currentNode, tokenSlice, view }); + + currentNode = currentNode.nextSibling; + + if ( + currentNode && + currentNode.type && + currentNode.type.name && + currentNode.type.name === 'ArgList' + ) { + currentNode = currentNode.firstChild; + } + } + + return { inputArgs, outputArgs, operator }; +} + +export function resolveExpressionFromNode(view: EditorView, node: SyntaxNode) { + const nodeType = node.type.name; + + switch (nodeType) { + case 'CallbackExpression': { + return { + ...resolveOpcodeStatement(view, node), + statementType: 'CallbackExpression', + }; + } + case 'OpcodeStatement': { + return { + ...resolveOpcodeStatement(view, node), + statementType: 'OpcodeStatement', + }; + } + default: { + return undefined; + } + } +} diff --git a/plugins/codemirror-lang-csound/src/print-tree.ts b/plugins/codemirror-lang-csound/src/print-tree.ts new file mode 100644 index 00000000..683c2d86 --- /dev/null +++ b/plugins/codemirror-lang-csound/src/print-tree.ts @@ -0,0 +1,293 @@ +/* eslint-disable unicorn/no-abusive-eslint-disable */ +/* eslint-disable */ +// MIT License +// +// Copyright (c) 2021 Matthijs Steen +// +// Permission is hereby granted, free of charge, to any person obtaining a copy +// of this software and associated documentation files (the "Software"), to deal +// in the Software without restriction, including without limitation the rights +// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +// copies of the Software, and to permit persons to whom the Software is +// furnished to do so, subject to the following conditions: +// +// The above copyright notice and this permission notice shall be included in all +// copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +// SOFTWARE. + +import { Text } from "@codemirror/state"; +import { Input, NodeType, SyntaxNode, Tree, TreeCursor } from "@lezer/common"; + +class StringInput implements Input { + constructor(private readonly input: string) {} + + get length() { + return this.input.length; + } + + chunk(from: number): string { + return this.input.slice(from); + } + + lineChunks = false; + + read(from: number, to: number): string { + return this.input.slice(from, to); + } +} + +export function sliceType( + cursor: TreeCursor, + input: Input, + type: number +): string | null { + if (cursor.type.id === type) { + const s = input.read(cursor.from, cursor.to); + cursor.nextSibling(); + return s; + } + return null; +} + +export function isType(cursor: TreeCursor, type: number): boolean { + const cond = cursor.type.id === type; + if (cond) cursor.nextSibling(); + return cond; +} + +export type CursorNode = { + type: NodeType; + from: number; + to: number; + isLeaf: boolean; +}; + +function cursorNode( + { type, from, to }: TreeCursor, + isLeaf = false +): CursorNode { + return { type, from, to, isLeaf }; +} + +export type TreeTraversal = { + beforeEnter?: (cursor: TreeCursor) => void; + onEnter: (node: CursorNode) => false | void; + onLeave?: (node: CursorNode) => false | void; +}; + +type TreeTraversalOptions = { + from?: number; + to?: number; + includeParents?: boolean; +} & TreeTraversal; + +export function traverseTree( + cursor: TreeCursor | Tree | SyntaxNode, + { + from = -Infinity, + to = Infinity, + includeParents = false, + beforeEnter, + onEnter, + onLeave + }: TreeTraversalOptions +): void { + if (!(cursor instanceof TreeCursor)) + cursor = (cursor instanceof Tree ? cursor.cursor() : cursor.cursor) as + | TreeCursor + | Tree + | SyntaxNode; + for (;;) { + let node = cursorNode(cursor as TreeCursor); + let leave = false; + if (node.from <= to && node.to >= from) { + const enter = + !node.type.isAnonymous && + (includeParents || (node.from >= from && node.to <= to)); + if (enter && beforeEnter) beforeEnter(cursor as TreeCursor); + node.isLeaf = !(cursor as TreeCursor).firstChild(); + if (enter) { + leave = true; + if (onEnter(node) === false) return; + } + if (!node.isLeaf) continue; + } + for (;;) { + node = cursorNode(cursor as TreeCursor, node.isLeaf); + if (leave && onLeave) if (onLeave(node) === false) return; + leave = cursor.type.isAnonymous; + node.isLeaf = false; + if ((cursor as TreeCursor).nextSibling()) break; + if (!(cursor as TreeCursor).parent()) return; + leave = true; + } + } +} + +function isChildOf(child: CursorNode, parent: CursorNode): boolean { + return ( + child.from >= parent.from && + child.from <= parent.to && + child.to <= parent.to && + child.to >= parent.from + ); +} + +export function validatorTraversal( + input: Input | string, + { fullMatch = true }: { fullMatch?: boolean } = {} +) { + if (typeof input === "string") input = new StringInput(input); + const state = { + valid: true, + parentNodes: [] as CursorNode[], + lastLeafTo: 0 + }; + return { + state, + traversal: { + onEnter(node) { + state.valid = true; + if (!node.isLeaf) state.parentNodes.unshift(node); + if (node.from > node.to || node.from < state.lastLeafTo) { + state.valid = false; + } else if (node.isLeaf) { + if ( + state.parentNodes.length && + !isChildOf(node, state.parentNodes[0]) + ) + state.valid = false; + state.lastLeafTo = node.to; + } else { + if (state.parentNodes.length) { + if (!isChildOf(node, state.parentNodes[0])) + state.valid = false; + } else if ( + fullMatch && + (node.from !== 0 || node.to !== input.length) + ) { + state.valid = false; + } + } + }, + onLeave(node) { + if (!node.isLeaf) state.parentNodes.shift(); + } + } as TreeTraversal + }; +} + +export function validateTree( + tree: TreeCursor | Tree | SyntaxNode, + input: Input | string, + options?: { fullMatch?: boolean } +): boolean { + const { state, traversal } = validatorTraversal(input, options); + traverseTree(tree, traversal); + return state.valid; +} + +enum Color { + Red = 31, + Green = 32, + Yellow = 33 +} + +function colorize(value: any, color: number): string { + return "\u001b[" + color + "m" + String(value) + "\u001b[39m"; +} + +type PrintTreeOptions = { + from?: number; + to?: number; + start?: number; + includeParents?: boolean; +}; + +export function printTree( + cursor: TreeCursor | Tree | SyntaxNode, + input: Input | string, + { from, to, start = 0, includeParents }: PrintTreeOptions = {} +): string { + const inp = typeof input === "string" ? new StringInput(input) : input; + const text = Text.of(inp.read(0, inp.length).split("\n")); + const state = { + output: "", + prefixes: [] as string[], + hasNextSibling: false + }; + const validator = validatorTraversal(inp); + traverseTree(cursor, { + from, + to, + includeParents, + beforeEnter(cursor) { + state.hasNextSibling = cursor.nextSibling() && cursor.prevSibling(); + }, + onEnter(node) { + validator.traversal.onEnter(node); + const isTop = state.output === ""; + const hasPrefix = !isTop || node.from > 0; + if (hasPrefix) { + state.output += (!isTop ? "\n" : "") + state.prefixes.join(""); + if (state.hasNextSibling) { + state.output += " ├─ "; + state.prefixes.push(" │ "); + } else { + state.output += " └─ "; + state.prefixes.push(" "); + } + } + const hasRange = node.from !== node.to; + state.output += + (node.type.isError || !validator.state.valid + ? colorize(node.type.name, Color.Red) + : node.type.name) + + " " + + (hasRange + ? "[" + + colorize(locAt(text, start + node.from), Color.Yellow) + + ".." + + colorize(locAt(text, start + node.to), Color.Yellow) + + "]" + : colorize(locAt(text, start + node.from), Color.Yellow)); + if (hasRange && node.isLeaf) { + state.output += + ": " + + colorize( + JSON.stringify(inp.read(node.from, node.to)), + Color.Green + ); + } + }, + onLeave(node) { + validator.traversal.onLeave!(node); + state.prefixes.pop(); + } + }); + return state.output; +} + +function locAt(text: Text, pos: number): string { + if (text.length < pos) { + return `${text.length}:0`; + } else { + const line = text.lineAt(pos); + return line.number + ":" + (pos - line.from); + } +} + +export function logTree( + tree: TreeCursor | Tree | SyntaxNode, + input: string, + options?: PrintTreeOptions +): void { + console.log(printTree(tree, input, options)); +} diff --git a/plugins/codemirror-lang-csound/src/sco.grammar b/plugins/codemirror-lang-csound/src/sco.grammar new file mode 100644 index 00000000..479a6bc5 --- /dev/null +++ b/plugins/codemirror-lang-csound/src/sco.grammar @@ -0,0 +1,3 @@ +@top SCORE { scoreStatement+ } + +// APPEND CSD RULES \ No newline at end of file diff --git a/plugins/codemirror-lang-csound/src/sco.grammar.d.ts b/plugins/codemirror-lang-csound/src/sco.grammar.d.ts new file mode 100644 index 00000000..c5ad6e24 --- /dev/null +++ b/plugins/codemirror-lang-csound/src/sco.grammar.d.ts @@ -0,0 +1,4 @@ +import { LRParser } from '@lezer/lr'; + +declare const parser: LRParser; +export { parser }; diff --git a/plugins/codemirror-lang-csound/src/tokens.js b/plugins/codemirror-lang-csound/src/tokens.js new file mode 100644 index 00000000..f6e7ce99 --- /dev/null +++ b/plugins/codemirror-lang-csound/src/tokens.js @@ -0,0 +1,21 @@ +/* eslint-disable import/no-unresolved */ +import { ContextTracker } from '@lezer/lr'; +import { BlockComment, LineComment, space, newline } from './syntax.terms'; + +export const trackNewline = new ContextTracker({ + start: false, + shift(context, term) { + return term == LineComment || term == BlockComment || term == space + ? context + : term == newline; + }, + strict: false, +}); + +// export const ignoreInlineComments = new ExternalTokenizer( +// (input, stack) => { +// // let { next } = input; +// console.log(input, stack); +// }, +// { contextual: true, fallback: true } +// ); diff --git a/plugins/codemirror-lang-csound/tsconfig.json b/plugins/codemirror-lang-csound/tsconfig.json new file mode 100644 index 00000000..7756387a --- /dev/null +++ b/plugins/codemirror-lang-csound/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "target": "esnext", + "module": "esnext", + "outDir": "dist", + "sourceMap": true, + "esModuleInterop": true, + "declaration": true, + "moduleResolution": "node", + "types": ["node"], + "strict": true, + "skipLibCheck": true, + "resolveJsonModule": true + }, + "include": ["src/**/*.ts"], + "exclude": ["node_modules"] +} diff --git a/plugins/codemirror-lang-csound/vite.config.ts b/plugins/codemirror-lang-csound/vite.config.ts new file mode 100644 index 00000000..24d45ec2 --- /dev/null +++ b/plugins/codemirror-lang-csound/vite.config.ts @@ -0,0 +1,69 @@ +import { defineConfig, type Plugin } from 'vite'; +import { readFileSync } from 'fs'; +import { fileURLToPath } from 'url'; +import { dirname, resolve, basename } from 'path'; +import { buildParserFile } from '@lezer/generator'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + +const externals = [ + 'codemirror', + '@codemirror/commands', + '@codemirror/search', + '@codemirror/language', + '@codemirror/autocomplete', + '@codemirror/view', + '@codemirror/state', + '@lezer/common', + '@lezer/highlight', + '@lezer/lr', +]; + +function lezerPlugin(): Plugin { + return { + name: 'lezer-grammar', + transform(_code, id) { + if (!id.endsWith('.grammar')) return null; + + const base = basename(id, '.grammar'); + const grammarCode = readFileSync(id, 'utf8'); + const commonCode = + base !== 'csd' + ? readFileSync(resolve(__dirname, 'src/csd.grammar'), 'utf8').replace( + /@top.*/, + '' + ) + : ''; + + const { parser } = buildParserFile(`${grammarCode}\n${commonCode}`, { + fileName: `${base}.grammar`, + moduleStyle: 'es', + warn: (msg) => { + if (base === 'csd') console.error(msg); + }, + }); + + return { code: parser, map: null }; + }, + }; +} + +export default defineConfig(({ command }) => ({ + plugins: [lezerPlugin()], + ...(command === 'build' + ? { + build: { + lib: { + entry: resolve(__dirname, 'src/index.ts'), + fileName: 'index', + formats: ['es'], + }, + rollupOptions: { + external: externals, + }, + }, + } + : { + root: resolve(__dirname, 'dev'), + }), +})); diff --git a/src/components/editor/editor.tsx b/src/components/editor/editor.tsx index 1ee61a63..7627c141 100644 --- a/src/components/editor/editor.tsx +++ b/src/components/editor/editor.tsx @@ -1,6 +1,7 @@ import { useCallback, useEffect, useRef, useState } from "react"; import { useDispatch, useSelector } from "@root/store"; -import { csoundMode } from "@hlolli/codemirror-lang-csound"; +import { csoundMode } from "@csound/codemirror-lang-csound"; +import { markdown } from "@codemirror/lang-markdown"; import { EditorView } from "codemirror"; import { crosshairCursor, @@ -20,8 +21,10 @@ import { } from "@codemirror/commands"; import { bracketMatching, + defaultHighlightStyle, foldGutter, - indentOnInput + indentOnInput, + syntaxHighlighting } from "@codemirror/language"; import { EditorState, StateField } from "@codemirror/state"; import { filenameToCsoundType } from "@comp/csound/utils"; @@ -80,6 +83,7 @@ const CodeEditor = ({ const document = project?.documents?.[documentUid] ?? ({} as IDocument); const csoundFileType = filenameToCsoundType(document.filename || ""); + const isMarkdown = /\.md(?:own)?$/i.test(document.filename || ""); const [csoundDocumentStateField, setCsoundDocumentStateField] = useState< StateField<{ documentUid: string; documentType: string }> | undefined @@ -142,13 +146,22 @@ const CodeEditor = ({ dropCursor(), EditorState.allowMultipleSelections.of(true), indentOnInput(), - csoundMode({ - fileType: - csoundFileType && - ((["sco", "orc", "csd"].includes(csoundFileType) - ? csoundFileType - : "orc") as "sco" | "orc" | "csd") - }), + ...(isMarkdown + ? [ + markdown(), + syntaxHighlighting(defaultHighlightStyle) + ] + : [ + csoundMode({ + fileType: + csoundFileType && + ((["sco", "orc", "csd"].includes( + csoundFileType + ) + ? csoundFileType + : "orc") as "sco" | "orc" | "csd") + }) + ]), keymap.of([ ...defaultKeymap.filter( (keyb) => diff --git a/src/components/editor/markdown-preview.tsx b/src/components/editor/markdown-preview.tsx new file mode 100644 index 00000000..9c762ceb --- /dev/null +++ b/src/components/editor/markdown-preview.tsx @@ -0,0 +1,240 @@ +import { useState } from "react"; +import { useSelector } from "@root/store"; +import { css, useTheme, Theme, SerializedStyles } from "@emotion/react"; +import ReactMarkdown from "react-markdown"; +import EditRoundedIcon from "@mui/icons-material/EditRounded"; +import VisibilityRoundedIcon from "@mui/icons-material/VisibilityRounded"; +import { _scrollbars } from "@styles/_common"; +import Editor from "./editor"; + +const containerStyle = css` + height: 100%; + display: flex; + flex-direction: column; +`; + +const toolbarStyle = (theme: Theme): SerializedStyles => css` + flex: 0 0 auto; + display: flex; + align-items: center; + justify-content: flex-end; + padding: 0 8px; + height: 34px; + background-color: ${theme.highlightBackgroundAlt}; + box-shadow: inset 0 -1px 0 ${theme.line}; +`; + +const toggleButtonStyle = (theme: Theme): SerializedStyles => css` + display: inline-flex; + align-items: center; + gap: 5px; + padding: 3px 10px; + border: 1px solid ${theme.line}; + border-radius: 6px; + background: ${theme.buttonBackground}; + color: ${theme.altTextColor}; + font-size: 12px; + font-family: inherit; + cursor: pointer; + transition: + background-color 0.15s ease, + color 0.15s ease; + + svg { + font-size: 14px !important; + } + + &:hover { + background: ${theme.buttonBackgroundHover}; + color: ${theme.textColor}; + } +`; + +const editorWrapperStyle = css` + flex: 1 1 auto; + min-height: 0; +`; + +const previewStyle = (theme: Theme): SerializedStyles => css` + flex: 1 1 auto; + min-height: 0; + overflow-y: auto; + padding: 24px 32px; + background-color: ${theme.background}; + color: ${theme.textColor}; + font-family: ${theme.font.regular}; + font-size: 15px; + line-height: 1.6; + ${_scrollbars(theme)} + + h1, + h2, + h3, + h4, + h5, + h6 { + color: ${theme.headerTextColor}; + font-weight: 600; + line-height: 1.25; + margin-top: 24px; + margin-bottom: 12px; + } + h1 { + font-size: 2em; + border-bottom: 1px solid ${theme.line}; + padding-bottom: 8px; + } + h2 { + font-size: 1.5em; + border-bottom: 1px solid ${theme.line}; + padding-bottom: 6px; + } + h3 { + font-size: 1.25em; + } + h4 { + font-size: 1em; + } + + p { + margin: 0 0 16px; + } + + a { + color: ${theme.keyword}; + text-decoration: none; + &:hover { + text-decoration: underline; + } + } + + code { + font-family: ${theme.font.monospace}; + font-size: 0.875em; + background: ${theme.highlightBackground}; + padding: 2px 5px; + border-radius: 4px; + } + + pre { + background: ${theme.highlightBackground}; + border: 1px solid ${theme.line}; + border-radius: 6px; + padding: 16px; + overflow-x: auto; + margin: 0 0 16px; + ${_scrollbars(theme)} + + code { + background: none; + padding: 0; + font-size: 0.875em; + } + } + + blockquote { + margin: 0 0 16px; + padding: 0 16px; + border-left: 4px solid ${theme.line}; + color: ${theme.altTextColor}; + } + + ul, + ol { + margin: 0 0 16px; + padding-left: 24px; + } + + li { + margin-bottom: 4px; + } + + hr { + border: none; + border-top: 1px solid ${theme.line}; + margin: 24px 0; + } + + table { + border-collapse: collapse; + width: 100%; + margin: 0 0 16px; + + th, + td { + border: 1px solid ${theme.line}; + padding: 6px 12px; + } + + th { + background: ${theme.highlightBackground}; + font-weight: 600; + } + + tr:nth-of-type(even) td { + background: ${theme.highlightBackgroundAlt}; + } + } + + img { + max-width: 100%; + } +`; + +export function MarkdownEditor({ + documentUid, + projectUid, + showPreview: showPreviewProp, + onTogglePreview +}: { + documentUid: string; + projectUid: string; + showPreview?: boolean; + onTogglePreview?: () => void; +}) { + const [showPreviewInternal, setShowPreviewInternal] = useState(false); + const isControlled = showPreviewProp !== undefined; + const showPreview = isControlled ? showPreviewProp : showPreviewInternal; + const theme = useTheme(); + + const content = useSelector( + (state: any) => + state?.ProjectsReducer?.projects?.[projectUid]?.documents?.[ + documentUid + ]?.currentValue ?? "" + ); + + return ( +