mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-04-29 06:09:56 +00:00
Started codemirror update, In broken state
This commit is contained in:
Dan Brown
parent
42f4c9afae
commit
d4f2fcdf79
6 changed files with 661 additions and 328 deletions
234
resources/js/code/index.mjs
Normal file
234
resources/js/code/index.mjs
Normal file
|
|
@ -0,0 +1,234 @@
|
|||
import {EditorView} from "@codemirror/view"
|
||||
// import {EditorState} from "@codemirror/state"
|
||||
import Clipboard from "clipboard/dist/clipboard.min";
|
||||
|
||||
// Modes
|
||||
import {modes, modeMap, modesAsStreamLanguages} from "./modes";
|
||||
import {viewer} from "./setups.js";
|
||||
|
||||
/**
|
||||
* Highlight pre elements on a page
|
||||
*/
|
||||
export function highlight() {
|
||||
const codeBlocks = document.querySelectorAll('.page-content pre, .comment-box .content pre');
|
||||
for (const codeBlock of codeBlocks) {
|
||||
highlightElem(codeBlock);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Highlight all code blocks within the given parent element
|
||||
* @param {HTMLElement} parent
|
||||
*/
|
||||
export function highlightWithin(parent) {
|
||||
const codeBlocks = parent.querySelectorAll('pre');
|
||||
for (const codeBlock of codeBlocks) {
|
||||
highlightElem(codeBlock);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add code highlighting to a single element.
|
||||
* @param {HTMLElement} elem
|
||||
*/
|
||||
function highlightElem(elem) {
|
||||
const innerCodeElem = elem.querySelector('code[class^=language-]');
|
||||
elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
|
||||
const content = elem.textContent.trimEnd();
|
||||
|
||||
let mode = '';
|
||||
if (innerCodeElem !== null) {
|
||||
const langName = innerCodeElem.className.replace('language-', '');
|
||||
mode = getMode(langName, content);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a button to a CodeMirror instance which copies the contents to the clipboard upon click.
|
||||
* @param cmInstance
|
||||
*/
|
||||
function addCopyIcon(cmInstance) {
|
||||
// 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);
|
||||
// });
|
||||
}
|
||||
|
||||
/**
|
||||
* Search for a codemirror code based off a user suggestion
|
||||
* @param {String} suggestion
|
||||
* @param {String} content
|
||||
* @returns {string}
|
||||
*/
|
||||
function getMode(suggestion, content) {
|
||||
suggestion = suggestion.trim().replace(/^\./g, '').toLowerCase();
|
||||
|
||||
const modeMapType = typeof modeMap[suggestion];
|
||||
|
||||
if (modeMapType === 'undefined') {
|
||||
return '';
|
||||
}
|
||||
|
||||
if (modeMapType === 'function') {
|
||||
return modeMap[suggestion](content);
|
||||
}
|
||||
|
||||
return modeMap[suggestion];
|
||||
}
|
||||
|
||||
/**
|
||||
* Ge the theme to use for CodeMirror instances.
|
||||
* @returns {*|string}
|
||||
*/
|
||||
function getTheme() {
|
||||
const darkMode = document.documentElement.classList.contains('dark-mode');
|
||||
return window.codeTheme || (darkMode ? 'darcula' : 'default');
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a CodeMirror instance for showing inside the WYSIWYG editor.
|
||||
* Manages a textarea element to hold code content.
|
||||
* @param {HTMLElement} cmContainer
|
||||
* @param {String} content
|
||||
* @param {String} language
|
||||
* @returns {{wrap: Element, editor: *}}
|
||||
*/
|
||||
export function wysiwygView(cmContainer, content, language) {
|
||||
return CodeMirror(cmContainer, {
|
||||
value: content,
|
||||
mode: getMode(language, content),
|
||||
lineNumbers: true,
|
||||
lineWrapping: false,
|
||||
theme: getTheme(),
|
||||
readOnly: true
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Create a CodeMirror instance to show in the WYSIWYG pop-up editor
|
||||
* @param {HTMLElement} elem
|
||||
* @param {String} modeSuggestion
|
||||
* @returns {*}
|
||||
*/
|
||||
export function popupEditor(elem, modeSuggestion) {
|
||||
const content = elem.textContent;
|
||||
|
||||
return CodeMirror(function(elt) {
|
||||
elem.parentNode.insertBefore(elt, elem);
|
||||
elem.style.display = 'none';
|
||||
}, {
|
||||
value: content,
|
||||
mode: getMode(modeSuggestion, content),
|
||||
lineNumbers: true,
|
||||
lineWrapping: false,
|
||||
theme: getTheme()
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Create an inline editor to replace the given textarea.
|
||||
* @param {HTMLTextAreaElement} textArea
|
||||
* @param {String} mode
|
||||
* @returns {CodeMirror3}
|
||||
*/
|
||||
export function inlineEditor(textArea, mode) {
|
||||
return CodeMirror.fromTextArea(textArea, {
|
||||
mode: getMode(mode, textArea.value),
|
||||
lineNumbers: true,
|
||||
lineWrapping: false,
|
||||
theme: getTheme(),
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the mode of a codemirror instance.
|
||||
* @param cmInstance
|
||||
* @param modeSuggestion
|
||||
*/
|
||||
export function setMode(cmInstance, modeSuggestion, content) {
|
||||
cmInstance.setOption('mode', getMode(modeSuggestion, content));
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the content of a cm instance.
|
||||
* @param cmInstance
|
||||
* @param codeContent
|
||||
*/
|
||||
export function setContent(cmInstance, codeContent) {
|
||||
cmInstance.setValue(codeContent);
|
||||
setTimeout(() => {
|
||||
updateLayout(cmInstance);
|
||||
}, 10);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the layout (codemirror refresh) of a cm instance.
|
||||
* @param cmInstance
|
||||
*/
|
||||
export function updateLayout(cmInstance) {
|
||||
cmInstance.refresh();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a CodeMirror instance to use for the markdown editor.
|
||||
* @param {HTMLElement} elem
|
||||
* @returns {*}
|
||||
*/
|
||||
export function markdownEditor(elem) {
|
||||
const content = elem.textContent;
|
||||
const config = {
|
||||
value: content,
|
||||
mode: "markdown",
|
||||
lineNumbers: true,
|
||||
lineWrapping: true,
|
||||
theme: getTheme(),
|
||||
scrollPastEnd: true,
|
||||
};
|
||||
|
||||
window.$events.emitPublic(elem, 'editor-markdown-cm::pre-init', {config});
|
||||
|
||||
return CodeMirror(function (elt) {
|
||||
elem.parentNode.insertBefore(elt, elem);
|
||||
elem.style.display = 'none';
|
||||
}, config);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the 'meta' key dependent on the user's system.
|
||||
* @returns {string}
|
||||
*/
|
||||
export function getMetaKey() {
|
||||
let mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
|
||||
return mac ? "Cmd" : "Ctrl";
|
||||
}
|
||||
134
resources/js/code/modes.js
Normal file
134
resources/js/code/modes.js
Normal 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));
|
||||
}
|
||||
32
resources/js/code/setups.js
Normal file
32
resources/js/code/setups.js
Normal 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(),
|
||||
];
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue