mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-05-15 13:10:29 +00:00
Merge branch 'codemirror6' into codemirror6_take2
This commit is contained in:
Dan Brown
commit
9135a85de4
8 changed files with 1129 additions and 1900 deletions
|
|
@ -1,7 +1,6 @@
|
||||||
#!/usr/bin/env node
|
#!/usr/bin/env node
|
||||||
|
|
||||||
const esbuild = require('esbuild');
|
const esbuild = require('esbuild');
|
||||||
const fs = require('fs');
|
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
|
||||||
// Check if we're building for production
|
// Check if we're building for production
|
||||||
|
|
@ -9,20 +8,19 @@ const path = require('path');
|
||||||
const isProd = process.argv[2] === 'production';
|
const isProd = process.argv[2] === 'production';
|
||||||
|
|
||||||
// Gather our input files
|
// Gather our input files
|
||||||
const jsInDir = path.join(__dirname, '../../resources/js');
|
const entryPoints = {
|
||||||
const jsInDirFiles = fs.readdirSync(jsInDir, 'utf8');
|
app: path.join(__dirname, '../../resources/js/app.js'),
|
||||||
const entryFiles = jsInDirFiles
|
code: path.join(__dirname, '../../resources/js/code/index.mjs'),
|
||||||
.filter(f => f.endsWith('.js') || f.endsWith('.mjs'))
|
};
|
||||||
.map(f => path.join(jsInDir, f));
|
|
||||||
|
|
||||||
// Locate our output directory
|
// Locate our output directory
|
||||||
const outDir = path.join(__dirname, '../../public/dist');
|
const outdir = path.join(__dirname, '../../public/dist');
|
||||||
|
|
||||||
// Build via esbuild
|
// Build via esbuild
|
||||||
esbuild.build({
|
esbuild.build({
|
||||||
bundle: true,
|
bundle: true,
|
||||||
entryPoints: entryFiles,
|
entryPoints,
|
||||||
outdir: outDir,
|
outdir,
|
||||||
sourcemap: true,
|
sourcemap: true,
|
||||||
target: 'es2020',
|
target: 'es2020',
|
||||||
mainFields: ['module', 'main'],
|
mainFields: ['module', 'main'],
|
||||||
|
|
|
||||||
2229
package-lock.json
generated
2229
package-lock.json
generated
File diff suppressed because it is too large
Load diff
20
package.json
20
package.json
|
|
@ -23,8 +23,26 @@
|
||||||
"sass": "^1.57.0"
|
"sass": "^1.57.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@codemirror/commands": "^6.0.1",
|
||||||
|
"@codemirror/lang-cpp": "^6.0.1",
|
||||||
|
"@codemirror/lang-css": "^6.0.0",
|
||||||
|
"@codemirror/lang-html": "^6.1.0",
|
||||||
|
"@codemirror/lang-java": "^6.0.0",
|
||||||
|
"@codemirror/lang-javascript": "^6.0.2",
|
||||||
|
"@codemirror/lang-json": "^6.0.0",
|
||||||
|
"@codemirror/lang-markdown": "^6.0.1",
|
||||||
|
"@codemirror/lang-php": "^6.0.0",
|
||||||
|
"@codemirror/lang-python": "^6.0.1",
|
||||||
|
"@codemirror/lang-rust": "^6.0.0",
|
||||||
|
"@codemirror/lang-sql": "^6.0.0",
|
||||||
|
"@codemirror/lang-xml": "^6.0.0",
|
||||||
|
"@codemirror/language": "^6.2.1",
|
||||||
|
"@codemirror/legacy-modes": "^6.1.0",
|
||||||
|
"@codemirror/state": "^6.1.0",
|
||||||
|
"@codemirror/theme-one-dark": "^6.0.0",
|
||||||
|
"@codemirror/view": "^6.1.2",
|
||||||
"clipboard": "^2.0.11",
|
"clipboard": "^2.0.11",
|
||||||
"codemirror": "^5.65.5",
|
"codemirror": "^6.0.1",
|
||||||
"dropzone": "^5.9.3",
|
"dropzone": "^5.9.3",
|
||||||
"markdown-it": "^13.0.1",
|
"markdown-it": "^13.0.1",
|
||||||
"markdown-it-task-lists": "^2.1.1",
|
"markdown-it-task-lists": "^2.1.1",
|
||||||
|
|
|
||||||
|
|
@ -1,346 +0,0 @@
|
||||||
import CodeMirror from "codemirror";
|
|
||||||
import Clipboard from "clipboard/dist/clipboard.min";
|
|
||||||
|
|
||||||
// Modes
|
|
||||||
import 'codemirror/mode/css/css';
|
|
||||||
import 'codemirror/mode/clike/clike';
|
|
||||||
import 'codemirror/mode/dart/dart';
|
|
||||||
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/octave/octave';
|
|
||||||
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/scheme/scheme';
|
|
||||||
import 'codemirror/mode/shell/shell';
|
|
||||||
import 'codemirror/mode/smarty/smarty';
|
|
||||||
import 'codemirror/mode/sql/sql';
|
|
||||||
import 'codemirror/mode/stex/stex';
|
|
||||||
import 'codemirror/mode/swift/swift';
|
|
||||||
import 'codemirror/mode/toml/toml';
|
|
||||||
import 'codemirror/mode/twig/twig';
|
|
||||||
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',
|
|
||||||
dart: 'application/dart',
|
|
||||||
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',
|
|
||||||
matlab: 'text/x-octave',
|
|
||||||
md: 'markdown',
|
|
||||||
mdown: 'markdown',
|
|
||||||
markdown: 'markdown',
|
|
||||||
ml: 'mllike',
|
|
||||||
mssql: 'text/x-mssql',
|
|
||||||
mysql: 'text/x-mysql',
|
|
||||||
nginx: 'nginx',
|
|
||||||
octave: 'text/x-octave',
|
|
||||||
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';
|
|
||||||
},
|
|
||||||
pgsql: 'text/x-pgsql',
|
|
||||||
'pl/sql': 'text/x-plsql',
|
|
||||||
postgresql: 'text/x-pgsql',
|
|
||||||
py: 'python',
|
|
||||||
python: 'python',
|
|
||||||
ruby: 'ruby',
|
|
||||||
rust: 'rust',
|
|
||||||
rb: 'ruby',
|
|
||||||
rs: 'rust',
|
|
||||||
scheme: 'scheme',
|
|
||||||
shell: 'shell',
|
|
||||||
sh: 'shell',
|
|
||||||
smarty: 'smarty',
|
|
||||||
sql: 'text/x-sql',
|
|
||||||
sqlite: 'text/x-sqlite',
|
|
||||||
stext: 'text/x-stex',
|
|
||||||
swift: 'text/x-swift',
|
|
||||||
toml: 'toml',
|
|
||||||
ts: 'text/typescript',
|
|
||||||
twig: 'twig',
|
|
||||||
typescript: 'text/typescript',
|
|
||||||
vbs: 'vbscript',
|
|
||||||
vbscript: 'vbscript',
|
|
||||||
'vb.net': 'text/x-vb',
|
|
||||||
vbnet: 'text/x-vb',
|
|
||||||
xml: 'xml',
|
|
||||||
yaml: 'yaml',
|
|
||||||
yml: 'yaml',
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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 cm = CodeMirror(function(elt) {
|
|
||||||
elem.parentNode.replaceChild(elt, elem);
|
|
||||||
}, {
|
|
||||||
value: content,
|
|
||||||
mode: mode,
|
|
||||||
lineNumbers: true,
|
|
||||||
lineWrapping: false,
|
|
||||||
theme: getTheme(),
|
|
||||||
readOnly: true
|
|
||||||
});
|
|
||||||
|
|
||||||
addCopyIcon(cm);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add a button to a CodeMirror instance which copies the contents to the clipboard upon click.
|
|
||||||
* @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);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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";
|
|
||||||
}
|
|
||||||
211
resources/js/code/index.mjs
Normal file
211
resources/js/code/index.mjs
Normal file
|
|
@ -0,0 +1,211 @@
|
||||||
|
import {EditorView} from "@codemirror/view"
|
||||||
|
import Clipboard from "clipboard/dist/clipboard.min";
|
||||||
|
|
||||||
|
// Modes
|
||||||
|
import {viewer} from "./setups.js";
|
||||||
|
import {createView, updateViewLanguage} from "./views.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 langName = '';
|
||||||
|
if (innerCodeElem !== null) {
|
||||||
|
langName = innerCodeElem.className.replace('language-', '');
|
||||||
|
}
|
||||||
|
|
||||||
|
const wrapper = document.createElement('div');
|
||||||
|
elem.parentNode.insertBefore(wrapper, elem);
|
||||||
|
|
||||||
|
const ev = createView({
|
||||||
|
parent: wrapper,
|
||||||
|
doc: content,
|
||||||
|
extensions: viewer(),
|
||||||
|
});
|
||||||
|
setMode(ev, langName, content);
|
||||||
|
|
||||||
|
elem.remove();
|
||||||
|
|
||||||
|
addCopyIcon(ev);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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);
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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 language mode of a codemirror EditorView.
|
||||||
|
*
|
||||||
|
* @param {EditorView} ev
|
||||||
|
* @param {string} modeSuggestion
|
||||||
|
* @param {string} content
|
||||||
|
*/
|
||||||
|
export function setMode(ev, modeSuggestion, content) {
|
||||||
|
updateViewLanguage(ev, 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";
|
||||||
|
}
|
||||||
122
resources/js/code/languages.js
Normal file
122
resources/js/code/languages.js
Normal file
|
|
@ -0,0 +1,122 @@
|
||||||
|
import {StreamLanguage} from "@codemirror/language"
|
||||||
|
|
||||||
|
import {css} from '@codemirror/lang-css';
|
||||||
|
import {c, csharp, kotlin, scala} from '@codemirror/legacy-modes/mode/clike';
|
||||||
|
import {cpp} from '@codemirror/lang-cpp';
|
||||||
|
import {diff} from '@codemirror/legacy-modes/mode/diff';
|
||||||
|
import {fortran} from '@codemirror/legacy-modes/mode/fortran';
|
||||||
|
import {go} from '@codemirror/legacy-modes/mode/go';
|
||||||
|
import {haskell} from '@codemirror/legacy-modes/mode/haskell';
|
||||||
|
import {html} from '@codemirror/lang-html';
|
||||||
|
import {java} from '@codemirror/lang-java';
|
||||||
|
import {javascript} from '@codemirror/lang-javascript';
|
||||||
|
import {json} from '@codemirror/lang-json';
|
||||||
|
import {julia} from '@codemirror/legacy-modes/mode/julia';
|
||||||
|
import {lua} from '@codemirror/legacy-modes/mode/lua';
|
||||||
|
import {markdown} from '@codemirror/lang-markdown';
|
||||||
|
import {oCaml, fSharp, sml} from '@codemirror/legacy-modes/mode/mllike';
|
||||||
|
import {nginx} from '@codemirror/legacy-modes/mode/nginx';
|
||||||
|
import {perl} from '@codemirror/legacy-modes/mode/perl';
|
||||||
|
import {pascal} from '@codemirror/legacy-modes/mode/pascal';
|
||||||
|
import {php} from '@codemirror/lang-php';
|
||||||
|
import {powerShell} from '@codemirror/legacy-modes/mode/powershell';
|
||||||
|
import {properties} from '@codemirror/legacy-modes/mode/properties';
|
||||||
|
import {python} from '@codemirror/lang-python';
|
||||||
|
import {ruby} from '@codemirror/legacy-modes/mode/ruby';
|
||||||
|
import {rust} from '@codemirror/lang-rust';
|
||||||
|
import {shell} from '@codemirror/legacy-modes/mode/shell';
|
||||||
|
import {sql} from '@codemirror/lang-sql';
|
||||||
|
import {stex} from '@codemirror/legacy-modes/mode/stex';
|
||||||
|
import {toml} from '@codemirror/legacy-modes/mode/toml';
|
||||||
|
import {vb} from '@codemirror/legacy-modes/mode/vb';
|
||||||
|
import {vbScript} from '@codemirror/legacy-modes/mode/vbscript';
|
||||||
|
import {xml} from '@codemirror/lang-xml';
|
||||||
|
import {yaml} from '@codemirror/legacy-modes/mode/yaml';
|
||||||
|
|
||||||
|
|
||||||
|
// 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: () => StreamLanguage.define(shell),
|
||||||
|
c: () => StreamLanguage.define(c),
|
||||||
|
css: () => css(),
|
||||||
|
'c++': () => cpp(),
|
||||||
|
'c#': () => StreamLanguage.define(csharp),
|
||||||
|
csharp: () => StreamLanguage.define(csharp),
|
||||||
|
diff: () => StreamLanguage.define(diff),
|
||||||
|
for: () => StreamLanguage.define(fortran),
|
||||||
|
fortran: () => StreamLanguage.define(fortran),
|
||||||
|
'f#': () => StreamLanguage.define(fSharp),
|
||||||
|
fsharp: () => StreamLanguage.define(fSharp),
|
||||||
|
go: () => StreamLanguage.define(go),
|
||||||
|
haskell: () => StreamLanguage.define(haskell),
|
||||||
|
hs: () => StreamLanguage.define(haskell),
|
||||||
|
html: () => html(),
|
||||||
|
ini: () => StreamLanguage.define(properties),
|
||||||
|
java: () => java(),
|
||||||
|
javascript: () => javascript(),
|
||||||
|
json: () => json(),
|
||||||
|
js: () => javascript(),
|
||||||
|
jl: () => StreamLanguage.define(julia),
|
||||||
|
julia: () => StreamLanguage.define(julia),
|
||||||
|
kotlin: () => StreamLanguage.define(kotlin),
|
||||||
|
latex: () => StreamLanguage.define(stex),
|
||||||
|
lua: () => StreamLanguage.define(lua),
|
||||||
|
markdown: () => markdown(),
|
||||||
|
md: () => markdown(),
|
||||||
|
mdown: () => markdown(),
|
||||||
|
ml: () => StreamLanguage.define(sml),
|
||||||
|
nginx: () => StreamLanguage.define(nginx),
|
||||||
|
pas: () => StreamLanguage.define(pascal),
|
||||||
|
pascal: () => StreamLanguage.define(pascal),
|
||||||
|
perl: () => StreamLanguage.define(perl),
|
||||||
|
php: (code) => {
|
||||||
|
const hasTags = code.includes('<?php');
|
||||||
|
return php({plain: !hasTags});
|
||||||
|
},
|
||||||
|
pl: () => StreamLanguage.define(perl),
|
||||||
|
powershell: () => StreamLanguage.define(powerShell),
|
||||||
|
properties: () => StreamLanguage.define(properties),
|
||||||
|
ocaml: () => StreamLanguage.define(oCaml),
|
||||||
|
py: () => python(),
|
||||||
|
python: () => python(),
|
||||||
|
rb: () => StreamLanguage.define(ruby),
|
||||||
|
rs: () => rust(),
|
||||||
|
ruby: () => StreamLanguage.define(ruby),
|
||||||
|
rust: () => rust(),
|
||||||
|
scala: () => StreamLanguage.define(scala),
|
||||||
|
shell: () => StreamLanguage.define(shell),
|
||||||
|
sh: () => StreamLanguage.define(shell),
|
||||||
|
stext: () => StreamLanguage.define(stex),
|
||||||
|
toml: () => StreamLanguage.define(toml),
|
||||||
|
ts: () => javascript({typescript: true}),
|
||||||
|
typescript: () => javascript({typescript: true}),
|
||||||
|
sql: () => sql(),
|
||||||
|
vbs: () => StreamLanguage.define(vbScript),
|
||||||
|
vbscript: () => StreamLanguage.define(vbScript),
|
||||||
|
'vb.net': () => StreamLanguage.define(vb),
|
||||||
|
vbnet: () => StreamLanguage.define(vb),
|
||||||
|
xml: () => xml(),
|
||||||
|
yaml: () => StreamLanguage.define(yaml),
|
||||||
|
yml: () => StreamLanguage.define(yaml),
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the relevant codemirror language extension based upon the given language
|
||||||
|
* suggestion and content.
|
||||||
|
* @param {String} langSuggestion
|
||||||
|
* @param {String} content
|
||||||
|
* @returns {StreamLanguage}
|
||||||
|
*/
|
||||||
|
export function getLanguageExtension(langSuggestion, content) {
|
||||||
|
const suggestion = langSuggestion.trim().replace(/^\./g, '').toLowerCase();
|
||||||
|
|
||||||
|
const language = modeMap[suggestion];
|
||||||
|
|
||||||
|
if (typeof language === 'undefined') {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
return language(content);
|
||||||
|
}
|
||||||
28
resources/js/code/setups.js
Normal file
28
resources/js/code/setups.js
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
|
||||||
|
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"
|
||||||
|
|
||||||
|
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),
|
||||||
|
];
|
||||||
|
}
|
||||||
57
resources/js/code/views.js
Normal file
57
resources/js/code/views.js
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
import {getLanguageExtension} from "./languages"
|
||||||
|
import {Compartment} from "@codemirror/state"
|
||||||
|
import {EditorView} from "@codemirror/view"
|
||||||
|
import {oneDark} from "@codemirror/theme-one-dark"
|
||||||
|
|
||||||
|
const viewLangCompartments = new WeakMap();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a new editor view.
|
||||||
|
*
|
||||||
|
* @param {{parent: Element, doc: String, extensions: Array}} config
|
||||||
|
* @returns {EditorView}
|
||||||
|
*/
|
||||||
|
export function createView(config) {
|
||||||
|
const langCompartment = new Compartment();
|
||||||
|
config.extensions.push(langCompartment.of([]));
|
||||||
|
config.extensions.push(getTheme(config.parent));
|
||||||
|
|
||||||
|
const ev = new EditorView(config);
|
||||||
|
|
||||||
|
viewLangCompartments.set(ev, langCompartment);
|
||||||
|
|
||||||
|
return ev;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ge the theme extension to use for editor view instance.
|
||||||
|
* @returns {Extension}
|
||||||
|
*/
|
||||||
|
function getTheme(viewParentEl) {
|
||||||
|
const darkMode = document.documentElement.classList.contains('dark-mode');
|
||||||
|
|
||||||
|
const eventData = {
|
||||||
|
darkMode: darkMode,
|
||||||
|
theme: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
window.$events.emitPublic(viewParentEl, 'library-cm6::configure-theme', eventData);
|
||||||
|
|
||||||
|
return eventData.theme || (darkMode ? oneDark : []);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set the language mode of an EditorView.
|
||||||
|
*
|
||||||
|
* @param {EditorView} ev
|
||||||
|
* @param {string} modeSuggestion
|
||||||
|
* @param {string} content
|
||||||
|
*/
|
||||||
|
export function updateViewLanguage(ev, modeSuggestion, content) {
|
||||||
|
const compartment = viewLangCompartments.get(ev);
|
||||||
|
const language = getLanguageExtension(modeSuggestion, content);
|
||||||
|
|
||||||
|
ev.dispatch({
|
||||||
|
effects: compartment.reconfigure(language ? language : [])
|
||||||
|
})
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue