From a1e1a2d17649cf53f357625c5644dc6a5c314a34 Mon Sep 17 00:00:00 2001
From: fspreck <f.spreckelsen@indiscale.com>
Date: Tue, 8 Feb 2022 13:48:10 +0100
Subject: [PATCH] ENH: Add MathJax buttons
---
sample/ckeditor.js | 9 +++--
src/mathjax_code_delimiters.js | 40 +++++++++++++++++++---
theme/icons/display.svg | 61 ++++++++++++++++++++++++++++++++++
theme/icons/inline.svg | 58 ++++++++++++++++++++++++++++++++
4 files changed, 158 insertions(+), 10 deletions(-)
create mode 100644 theme/icons/display.svg
create mode 100644 theme/icons/inline.svg
diff --git a/sample/ckeditor.js b/sample/ckeditor.js
index 9629e46..7bf0ff4 100644
--- a/sample/ckeditor.js
+++ b/sample/ckeditor.js
@@ -23,15 +23,14 @@ import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
-import MyPlugin from '../src/myplugin';
+import MathJaxCodeDelimiters from '../src/mathjax_code_delimiters';
/* global document, window */
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [
- // `MyPlugin` is an example plugin generated by the package generator.
- MyPlugin,
+ MathJaxCodeDelimiters,
Essentials,
Autoformat,
BlockQuote,
@@ -55,8 +54,8 @@ ClassicEditor
Base64UploadAdapter
],
toolbar: [
- // `myButton` is an example button provided by the `MyPlugin` class.
- 'myButton',
+ 'inlineMathButton',
+ 'displayMathButton',
'|',
'heading',
'|',
diff --git a/src/mathjax_code_delimiters.js b/src/mathjax_code_delimiters.js
index 4b890c5..4740fe1 100644
--- a/src/mathjax_code_delimiters.js
+++ b/src/mathjax_code_delimiters.js
@@ -1,9 +1,12 @@
import {
Plugin
-} from 'ckeditor/src/core';
+} from 'ckeditor5/src/core';
import {
ButtonView
-} from 'ckeditor/src/ui';
+} from 'ckeditor5/src/ui';
+
+import displayIcon from '../theme/icons/display.svg';
+import inlineIcon from '../theme/icons/inline.svg';
export default class MathJaxCodeDelimiters extends Plugin {
static get pluginName() {
@@ -23,21 +26,48 @@ export default class MathJaxCodeDelimiters extends Plugin {
view.set( {
label: t( 'Insert inline math delimiters' ),
- icon: '$',
+ icon: inlineIcon,
+ tooltip: true,
+ isToggleable: true
+ } );
+
+ // Insert the inline delimiters ("`$ $`") into the text at the
+ // position of the cursor.
+ this.listenTo( view, 'execute', () => {
+ model.change( writer => {
+ const textNode = writer.createText( '`$ $`' );
+ model.insertContent( textNode );
+ } );
+
+ editor.editing.view.focus();
+ } );
+
+ return view;
+ } );
+
+ // Add the display-math button
+ editor.ui.componentFactory.add( 'displayMathButton', locale => {
+ const view = new ButtonView( locale );
+
+ view.set( {
+ label: t( 'Insert display math delimiters' ),
+ icon: displayIcon,
tooltip: true,
isToggleable: true
} );
- // Insert the inline delimiters ("`$$`") into the text at the
+ // Insert the inline delimiters ("`$$ $$`") into the text at the
// position of the cursor.
this.listenTo( view, 'execute', () => {
model.change( writer => {
- const textNode = writer.createText( '`$$`' );
+ const textNode = writer.createText( '`$$ $$`' );
model.insertContent( textNode );
} );
editor.editing.view.focus();
} );
+
+ return view;
} );
}
}
diff --git a/theme/icons/display.svg b/theme/icons/display.svg
new file mode 100644
index 0000000..063bc74
--- /dev/null
+++ b/theme/icons/display.svg
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ width="68"
+ height="64"
+ viewBox="0 0 68 64"
+ version="1.1"
+ id="svg10"
+ sodipodi:docname="display.svg"
+ inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <defs
+ id="defs14">
+ <rect
+ x="5.1852225"
+ y="3.8651919"
+ width="75.926501"
+ height="50.619746"
+ id="rect4529" />
+ </defs>
+ <sodipodi:namedview
+ id="namedview12"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ showgrid="false"
+ inkscape:zoom="13.640625"
+ inkscape:cx="33.979381"
+ inkscape:cy="30.057274"
+ inkscape:window-width="2560"
+ inkscape:window-height="1371"
+ inkscape:window-x="0"
+ inkscape:window-y="32"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="g8" />
+ <g
+ fill="none"
+ fill-rule="evenodd"
+ id="g8">
+ <g
+ aria-label="`$$"
+ transform="matrix(1.0350938,0,0,1.1142891,-8.1211871,1.9607164)"
+ id="text4527"
+ style="font-size:40px;line-height:1.25;white-space:pre;shape-inside:url(#rect4529);fill:#000000">
+ <path
+ d="m 12.353516,7.2636719 5.507812,7.3046871 H 14.873047 L 8.5058594,7.2636719 Z"
+ id="path30788" />
+ <path
+ d="m 38.701172,45.134766 h -1.953125 l -0.01953,-5.878907 q -2.050782,-0.03906 -4.101563,-0.46875 -2.050781,-0.449218 -4.121094,-1.328125 v -3.515625 q 1.992188,1.25 4.023438,1.894532 2.050781,0.625 4.21875,0.644531 v -8.90625 q -4.316406,-0.703125 -6.289063,-2.382813 -1.953125,-1.679687 -1.953125,-4.609375 0,-3.183593 2.128907,-5.019531 2.128906,-1.835937 6.113281,-2.109375 V 8.8652344 h 1.953125 v 4.5312496 q 1.816406,0.07813 3.515625,0.390625 1.699219,0.292969 3.320312,0.820313 v 3.417969 q -1.621093,-0.820313 -3.339843,-1.269532 -1.699219,-0.449218 -3.496094,-0.527343 v 8.339843 q 4.433594,0.683594 6.523437,2.441407 2.089844,1.757812 2.089844,4.804687 0,3.300781 -2.226562,5.214844 -2.207032,1.894531 -6.386719,2.1875 z M 36.748047,24.216797 v -8.007813 q -2.265625,0.253907 -3.457031,1.289063 -1.191407,1.035156 -1.191407,2.753906 0,1.679688 1.09375,2.617188 1.113282,0.9375 3.554688,1.347656 z m 1.953125,3.75 v 8.457031 q 2.480469,-0.332031 3.730469,-1.40625 1.269531,-1.074219 1.269531,-2.832031 0,-1.71875 -1.210938,-2.734375 -1.191406,-1.015625 -3.789062,-1.484375 z"
+ id="path30790" />
+ <path
+ d="m 64.150391,45.134766 h -1.953125 l -0.01953,-5.878907 q -2.050781,-0.03906 -4.101562,-0.46875 -2.050781,-0.449218 -4.121094,-1.328125 v -3.515625 q 1.992188,1.25 4.023438,1.894532 2.050781,0.625 4.21875,0.644531 v -8.90625 q -4.316407,-0.703125 -6.289063,-2.382813 -1.953125,-1.679687 -1.953125,-4.609375 0,-3.183593 2.128906,-5.019531 2.128907,-1.835937 6.113282,-2.109375 V 8.8652344 h 1.953125 v 4.5312496 q 1.816406,0.07813 3.515625,0.390625 1.699218,0.292969 3.320312,0.820313 v 3.417969 q -1.621094,-0.820313 -3.339844,-1.269532 -1.699218,-0.449218 -3.496093,-0.527343 v 8.339843 q 4.433593,0.683594 6.523437,2.441407 2.089844,1.757812 2.089844,4.804687 0,3.300781 -2.226563,5.214844 -2.207031,1.894531 -6.386718,2.1875 z M 62.197266,24.216797 v -8.007813 q -2.265625,0.253907 -3.457032,1.289063 -1.191406,1.035156 -1.191406,2.753906 0,1.679688 1.09375,2.617188 1.113281,0.9375 3.554688,1.347656 z m 1.953125,3.75 v 8.457031 q 2.480468,-0.332031 3.730468,-1.40625 1.269532,-1.074219 1.269532,-2.832031 0,-1.71875 -1.210938,-2.734375 -1.191406,-1.015625 -3.789062,-1.484375 z"
+ id="path30792" />
+ </g>
+ </g>
+</svg>
diff --git a/theme/icons/inline.svg b/theme/icons/inline.svg
new file mode 100644
index 0000000..75649b1
--- /dev/null
+++ b/theme/icons/inline.svg
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ width="68"
+ height="64"
+ viewBox="0 0 68 64"
+ version="1.1"
+ id="svg10"
+ sodipodi:docname="inline.svg"
+ inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <defs
+ id="defs14">
+ <rect
+ x="5.1852225"
+ y="3.8651919"
+ width="75.926501"
+ height="50.619746"
+ id="rect4529" />
+ </defs>
+ <sodipodi:namedview
+ id="namedview12"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ showgrid="false"
+ inkscape:zoom="13.640625"
+ inkscape:cx="33.979381"
+ inkscape:cy="30.057274"
+ inkscape:window-width="2560"
+ inkscape:window-height="1371"
+ inkscape:window-x="0"
+ inkscape:window-y="32"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="g8" />
+ <g
+ fill="none"
+ fill-rule="evenodd"
+ id="g8">
+ <g
+ aria-label="`$"
+ transform="matrix(1.0350938,0,0,1.1142891,-8.1211871,1.9607164)"
+ id="text4527"
+ style="font-size:40px;line-height:1.25;white-space:pre;shape-inside:url(#rect4529);fill:#000000">
+ <path
+ d="m 12.353516,7.2636719 5.507812,7.3046871 H 14.873047 L 8.5058594,7.2636719 Z"
+ id="path33568" />
+ <path
+ d="m 38.701172,45.134766 h -1.953125 l -0.01953,-5.878907 q -2.050782,-0.03906 -4.101563,-0.46875 -2.050781,-0.449218 -4.121094,-1.328125 v -3.515625 q 1.992188,1.25 4.023438,1.894532 2.050781,0.625 4.21875,0.644531 v -8.90625 q -4.316406,-0.703125 -6.289063,-2.382813 -1.953125,-1.679687 -1.953125,-4.609375 0,-3.183593 2.128907,-5.019531 2.128906,-1.835937 6.113281,-2.109375 V 8.8652344 h 1.953125 v 4.5312496 q 1.816406,0.07813 3.515625,0.390625 1.699219,0.292969 3.320312,0.820313 v 3.417969 q -1.621093,-0.820313 -3.339843,-1.269532 -1.699219,-0.449218 -3.496094,-0.527343 v 8.339843 q 4.433594,0.683594 6.523437,2.441407 2.089844,1.757812 2.089844,4.804687 0,3.300781 -2.226562,5.214844 -2.207032,1.894531 -6.386719,2.1875 z M 36.748047,24.216797 v -8.007813 q -2.265625,0.253907 -3.457031,1.289063 -1.191407,1.035156 -1.191407,2.753906 0,1.679688 1.09375,2.617188 1.113282,0.9375 3.554688,1.347656 z m 1.953125,3.75 v 8.457031 q 2.480469,-0.332031 3.730469,-1.40625 1.269531,-1.074219 1.269531,-2.832031 0,-1.71875 -1.210938,-2.734375 -1.191406,-1.015625 -3.789062,-1.484375 z"
+ id="path33570" />
+ </g>
+ </g>
+</svg>
--
GitLab