1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-27 06:01:54 +03:00

Started codemirror update, In broken state

This commit is contained in:
Dan Brown
2022-08-02 20:11:02 +01:00
parent 42f4c9afae
commit d4f2fcdf79
6 changed files with 661 additions and 328 deletions

View File

@ -1,106 +1,10 @@
import CodeMirror from "codemirror";
import {EditorView} from "@codemirror/view"
// import {EditorState} from "@codemirror/state"
import Clipboard from "clipboard/dist/clipboard.min";
// Modes
import 'codemirror/mode/css/css';
import 'codemirror/mode/clike/clike';
import 'codemirror/mode/diff/diff';
import 'codemirror/mode/fortran/fortran';
import 'codemirror/mode/go/go';
import 'codemirror/mode/haskell/haskell';
import 'codemirror/mode/htmlmixed/htmlmixed';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/julia/julia';
import 'codemirror/mode/lua/lua';
import 'codemirror/mode/markdown/markdown';
import 'codemirror/mode/mllike/mllike';
import 'codemirror/mode/nginx/nginx';
import 'codemirror/mode/perl/perl';
import 'codemirror/mode/pascal/pascal';
import 'codemirror/mode/php/php';
import 'codemirror/mode/powershell/powershell';
import 'codemirror/mode/properties/properties';
import 'codemirror/mode/python/python';
import 'codemirror/mode/ruby/ruby';
import 'codemirror/mode/rust/rust';
import 'codemirror/mode/shell/shell';
import 'codemirror/mode/sql/sql';
import 'codemirror/mode/stex/stex';
import 'codemirror/mode/toml/toml';
import 'codemirror/mode/vb/vb';
import 'codemirror/mode/vbscript/vbscript';
import 'codemirror/mode/xml/xml';
import 'codemirror/mode/yaml/yaml';
// Addons
import 'codemirror/addon/scroll/scrollpastend';
// Mapping of possible languages or formats from user input to their codemirror modes.
// Value can be a mode string or a function that will receive the code content & return the mode string.
// The function option is used in the event the exact mode could be dynamic depending on the code.
const modeMap = {
bash: 'shell',
css: 'css',
c: 'text/x-csrc',
java: 'text/x-java',
scala: 'text/x-scala',
kotlin: 'text/x-kotlin',
'c++': 'text/x-c++src',
'c#': 'text/x-csharp',
csharp: 'text/x-csharp',
diff: 'diff',
for: 'fortran',
fortran: 'fortran',
'f#': 'text/x-fsharp',
fsharp: 'text/x-fsharp',
go: 'go',
haskell: 'haskell',
hs: 'haskell',
html: 'htmlmixed',
ini: 'properties',
javascript: 'text/javascript',
json: 'application/json',
js: 'text/javascript',
jl: 'text/x-julia',
julia: 'text/x-julia',
latex: 'text/x-stex',
lua: 'lua',
md: 'markdown',
mdown: 'markdown',
markdown: 'markdown',
ml: 'mllike',
nginx: 'nginx',
perl: 'perl',
pl: 'perl',
powershell: 'powershell',
properties: 'properties',
ocaml: 'text/x-ocaml',
pascal: 'text/x-pascal',
pas: 'text/x-pascal',
php: (content) => {
return content.includes('<?php') ? 'php' : 'text/x-php';
},
py: 'python',
python: 'python',
ruby: 'ruby',
rust: 'rust',
rb: 'ruby',
rs: 'rust',
shell: 'shell',
sh: 'shell',
stext: 'text/x-stex',
toml: 'toml',
ts: 'text/typescript',
typescript: 'text/typescript',
sql: 'text/x-sql',
vbs: 'vbscript',
vbscript: 'vbscript',
'vb.net': 'text/x-vb',
vbnet: 'text/x-vb',
xml: 'xml',
yaml: 'yaml',
yml: 'yaml',
};
import {modes, modeMap, modesAsStreamLanguages} from "./modes";
import {viewer} from "./setups.js";
/**
* Highlight pre elements on a page
@ -138,17 +42,19 @@ function highlightElem(elem) {
mode = getMode(langName, content);
}
const cm = CodeMirror(function(elt) {
elem.parentNode.replaceChild(elt, elem);
}, {
value: content,
mode: mode,
lineNumbers: true,
lineWrapping: false,
theme: getTheme(),
readOnly: true
const wrapper = document.createElement('div');
elem.parentNode.insertBefore(wrapper, elem);
const cm = new EditorView({
parent: wrapper,
doc: content,
extensions: viewer(),
});
elem.remove();
// TODO - theme: getTheme(),
// TODO - mode,
addCopyIcon(cm);
}
@ -157,24 +63,25 @@ function highlightElem(elem) {
* @param cmInstance
*/
function addCopyIcon(cmInstance) {
const copyIcon = `<svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>`;
const copyButton = document.createElement('div');
copyButton.classList.add('CodeMirror-copy');
copyButton.innerHTML = copyIcon;
cmInstance.display.wrapper.appendChild(copyButton);
const clipboard = new Clipboard(copyButton, {
text: function(trigger) {
return cmInstance.getValue()
}
});
clipboard.on('success', event => {
copyButton.classList.add('success');
setTimeout(() => {
copyButton.classList.remove('success');
}, 240);
});
// TODO
// const copyIcon = `<svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>`;
// const copyButton = document.createElement('div');
// copyButton.classList.add('CodeMirror-copy');
// copyButton.innerHTML = copyIcon;
// cmInstance.display.wrapper.appendChild(copyButton);
//
// const clipboard = new Clipboard(copyButton, {
// text: function(trigger) {
// return cmInstance.getValue()
// }
// });
//
// clipboard.on('success', event => {
// copyButton.classList.add('success');
// setTimeout(() => {
// copyButton.classList.remove('success');
// }, 240);
// });
}
/**

134
resources/js/code/modes.js Normal file
View File

@ -0,0 +1,134 @@
import {StreamLanguage} from "@codemirror/language"
import {css as langCss} from '@codemirror/legacy-modes/mode/css';
import {clike as langClike} from '@codemirror/legacy-modes/mode/clike';
import {diff as langDiff} from '@codemirror/legacy-modes/mode/diff';
import {fortran as langFortran} from '@codemirror/legacy-modes/mode/fortran';
import {go as langGo} from '@codemirror/legacy-modes/mode/go';
import {haskell as langHaskell} from '@codemirror/legacy-modes/mode/haskell';
// import {htmlmixed as langHtmlmixed} from '@codemirror/legacy-modes/mode/htmlmixed';
import {javascript as langJavascript} from '@codemirror/legacy-modes/mode/javascript';
import {julia as langJulia} from '@codemirror/legacy-modes/mode/julia';
import {lua as langLua} from '@codemirror/legacy-modes/mode/lua';
// import {markdown as langMarkdown} from '@codemirror/legacy-modes/mode/markdown';
import {oCaml as langMllike} from '@codemirror/legacy-modes/mode/mllike';
import {nginx as langNginx} from '@codemirror/legacy-modes/mode/nginx';
import {perl as langPerl} from '@codemirror/legacy-modes/mode/perl';
import {pascal as langPascal} from '@codemirror/legacy-modes/mode/pascal';
// import {php as langPhp} from '@codemirror/legacy-modes/mode/php';
import {powerShell as langPowershell} from '@codemirror/legacy-modes/mode/powershell';
import {properties as langProperties} from '@codemirror/legacy-modes/mode/properties';
import {python as langPython} from '@codemirror/legacy-modes/mode/python';
import {ruby as langRuby} from '@codemirror/legacy-modes/mode/ruby';
import {rust as langRust} from '@codemirror/legacy-modes/mode/rust';
import {shell as langShell} from '@codemirror/legacy-modes/mode/shell';
import {sql as langSql} from '@codemirror/legacy-modes/mode/sql';
import {stex as langStex} from '@codemirror/legacy-modes/mode/stex';
import {toml as langToml} from '@codemirror/legacy-modes/mode/toml';
import {vb as langVb} from '@codemirror/legacy-modes/mode/vb';
import {vbScript as langVbscript} from '@codemirror/legacy-modes/mode/vbscript';
import {xml as langXml} from '@codemirror/legacy-modes/mode/xml';
import {yaml as langYaml} from '@codemirror/legacy-modes/mode/yaml';
export const modes = [
langCss,
langClike,
langDiff,
langFortran,
langGo,
langHaskell,
// langHtmlmixed,
langJavascript,
langJulia,
langLua,
// langMarkdown,
langMllike,
langNginx,
langPerl,
langPascal,
// langPhp,
langPowershell,
langProperties,
langPython,
langRuby,
langRust,
langShell,
langSql,
langStex,
langToml,
langVb,
langVbscript,
langXml,
langYaml,
];
// Mapping of possible languages or formats from user input to their codemirror modes.
// Value can be a mode string or a function that will receive the code content & return the mode string.
// The function option is used in the event the exact mode could be dynamic depending on the code.
export const modeMap = {
bash: 'shell',
css: 'css',
c: 'text/x-csrc',
java: 'text/x-java',
scala: 'text/x-scala',
kotlin: 'text/x-kotlin',
'c++': 'text/x-c++src',
'c#': 'text/x-csharp',
csharp: 'text/x-csharp',
diff: 'diff',
for: 'fortran',
fortran: 'fortran',
'f#': 'text/x-fsharp',
fsharp: 'text/x-fsharp',
go: 'go',
haskell: 'haskell',
hs: 'haskell',
html: 'htmlmixed',
ini: 'properties',
javascript: 'text/javascript',
json: 'application/json',
js: 'text/javascript',
jl: 'text/x-julia',
julia: 'text/x-julia',
latex: 'text/x-stex',
lua: 'lua',
md: 'markdown',
mdown: 'markdown',
markdown: 'markdown',
ml: 'mllike',
nginx: 'nginx',
perl: 'perl',
pl: 'perl',
powershell: 'powershell',
properties: 'properties',
ocaml: 'text/x-ocaml',
pascal: 'text/x-pascal',
pas: 'text/x-pascal',
php: (content) => {
return content.includes('<?php') ? 'php' : 'text/x-php';
},
py: 'python',
python: 'python',
ruby: 'ruby',
rust: 'rust',
rb: 'ruby',
rs: 'rust',
shell: 'shell',
sh: 'shell',
stext: 'text/x-stex',
toml: 'toml',
ts: 'text/typescript',
typescript: 'text/typescript',
sql: 'text/x-sql',
vbs: 'vbscript',
vbscript: 'vbscript',
'vb.net': 'text/x-vb',
vbnet: 'text/x-vb',
xml: 'xml',
yaml: 'yaml',
yml: 'yaml',
};
export function modesAsStreamLanguages() {
return modes.map(mode => StreamLanguage.define(mode));
}

View File

@ -0,0 +1,32 @@
import {keymap, highlightSpecialChars, drawSelection, highlightActiveLine, dropCursor,
rectangularSelection, lineNumbers, highlightActiveLineGutter} from "@codemirror/view"
import {defaultHighlightStyle, syntaxHighlighting, bracketMatching,
foldKeymap} from "@codemirror/language"
import {defaultKeymap, history, historyKeymap} from "@codemirror/commands"
import {EditorState} from "@codemirror/state"
import {modesAsStreamLanguages} from "./modes";
export function viewer() {
return [
lineNumbers(),
highlightActiveLineGutter(),
highlightSpecialChars(),
history(),
drawSelection(),
dropCursor(),
syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
bracketMatching(),
rectangularSelection(),
highlightActiveLine(),
keymap.of([
...defaultKeymap,
...historyKeymap,
...foldKeymap,
]),
EditorState.readOnly.of(true),
...modesAsStreamLanguages(),
];
}