Skip to content
Snippets Groups Projects
Commit 98f17796 authored by Florian Spreckelsen's avatar Florian Spreckelsen
Browse files

Merge branch 'f-inline-reference-button' into 'dev'

ENH: Add inline reference button

See merge request !1
parents 45fa9845 4265ad22
No related branches found
No related tags found
1 merge request!1ENH: Add inline reference button
......@@ -5,3 +5,4 @@ tmp/
sample/ckeditor.dist.js
/package-lock.json
*~
*.tgz
@indiscale/ckeditor5-complexitywiki-plugins
===========================================
This package was created by the [ckeditor5-package-generator](https://www.npmjs.com/package/ckeditor5-package-generator) package.
This plugin troduces three buttons that insert specific syntax used for CaosDB's
wiki app into the editor field:
* An `inlineMathButton` which inserts the delimiters for inline MathJax at the
position of the cursor.
* A `displayMathButton` which inserts the delimiters for display MathJax at the
position of the cursor.
* An `inlineReferenceButton` which inserts a template for an inline reference to
another CaosDB entity or one of its properties at the position of the cursor.
This package was created by the
[ckeditor5-package-generator](https://www.npmjs.com/package/ckeditor5-package-generator)
package.
## Table of contents
......@@ -20,7 +32,27 @@ This package was created by the [ckeditor5-package-generator](https://www.npmjs.
## Developing the package
To read about the CKEditor 5 framework, visit the [CKEditor5 documentation](https://ckeditor.com/docs/ckeditor5/latest/framework/index.html).
To develop this package, edit the code in the `src` directory. You can use the
[`npm run start` script](#start) to test your changes directly with the editor
defined in `sample/ckeditor.js`. To actually test it together with CaosDB's web
interface, the following steps have to be followed:
1. `npm pack` this repository and install it in the `ckeditor5-build-classic`
package of our [CKeditor 5
fork](https://gitlab.indiscale.com/caosdb/src/ckeditor5).
2. Test and build the package as described in that repo's `README_INDISCALE.md`.
3. Zip and copy the build files to `caosdb-webui/libs`
4. Start a CaosDB server with that version of the webinterface and test the
editor in the edit mode
Only after successful tests and a code review of your changes in this
repository, merge your development branch and publish the new version of this
repo on npm with `npm publish`. Then it can be included in our custom build of
CKEditor which then can subsequently be used in the upstream repo of the
caosdb-webui.
To read about the CKEditor 5 framework, visit the [CKEditor5
documentation](https://ckeditor.com/docs/ckeditor5/latest/framework/index.html).
## Available scripts
......@@ -81,6 +113,18 @@ Examples:
npm run lint
```
### `lint-fix`
Like the above [`lint`](#lint) but runs ESLint with the `--fix` option which
fixes a lot of formatting issues automatically.
Examples:
```bash
# Execute eslint with --fix option
npm run lint-fix
```
### `stylelint`
Similar to the `lint` task, stylelint analyzes the CSS code (`*.css` files in the `theme/` directory) in the package.
......
......@@ -104,7 +104,8 @@ ClassicEditor
'codeBlock',
'|',
'inlineMathButton',
'displayMathButton'
'displayMathButton',
'inlineReferenceButton'
],
image: {
toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'imageTextAlternative' ]
......
......@@ -21,6 +21,12 @@
* SOFTWARE.
*/
/**
* @author Florian Spreckelsen
* @date 2022-02-18
* @review Timm Fitschen 2022-02-18
*/
import {
Plugin
} from 'ckeditor5/src/core';
......@@ -31,6 +37,7 @@ import {
import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
import Markdown from '@ckeditor/ckeditor5-markdown-gfm/src/markdown.js';
import caosdbIcon from '../theme/icons/caosdb_icon.svg';
import displayIcon from '../theme/icons/display.svg';
import inlineIcon from '../theme/icons/inline.svg';
......@@ -101,5 +108,26 @@ export default class ComplexitywikiPlugins extends Plugin {
return view;
} );
// Add the inline-link button
editor.ui.componentFactory.add( 'inlineReferenceButton', locale => {
const view = new ButtonView( locale );
view.set( {
label: t( 'Insert an inline-reference link to another CaosDB entity' ),
icon: caosdbIcon,
tooltip: true,
isToggleable: true
} );
this.listenTo( view, 'execute', () => {
model.change( writer => {
const textNode = writer.createText( '[<link text (optional)>](entity:<id or id.propertyName>', { 'code': true } );
model.insertContent( textNode );
} );
} );
return view;
} );
}
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="5.6886401mm"
height="5.6886401mm"
viewBox="0 0 5.6886402 5.6886402"
version="1.1"
id="svg1380"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
sodipodi:docname="caosdb_icon.svg"
inkscape:export-filename="/home/daniel/indiscale/management/internal/docs/grafiken.2018-10-23/logo/caosdb_logo.2019-08-05/caosdb_icon.512.png"
inkscape:export-xdpi="2286.1001"
inkscape:export-ydpi="2286.1001">
<defs
id="defs1374" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="7.9195959"
inkscape:cx="51.429643"
inkscape:cy="-1.736402"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1135"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1" />
<metadata
id="metadata1377">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(133.29358,119.81429)">
<g
transform="matrix(1.9221593,0,0,1.9221593,-234.19285,-614.98811)"
id="g10471">
<path
id="path3054"
style="fill:none;stroke:#abc837;stroke-width:0.13006206;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
sodipodi:type="arc"
sodipodi:cx="53.972397"
sodipodi:cy="259.6973"
sodipodi:rx="1.4368194"
sodipodi:ry="0.47309005"
sodipodi:start="5.8755288"
sodipodi:end="3.5501368"
sodipodi:open="true"
d="m 55.291472,259.50974 a 1.4368194,0.47309005 0 0 1 -0.439058,0.56153 1.4368194,0.47309005 0 0 1 -1.761042,-2.6e-4 1.4368194,0.47309005 0 0 1 -0.437545,-0.56166" />
<path
id="path3054-3"
style="fill:none;stroke:#abc837;stroke-width:0.13006206;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
sodipodi:type="arc"
sodipodi:cx="53.972397"
sodipodi:cy="259.29422"
sodipodi:rx="1.4368194"
sodipodi:ry="0.47309005"
sodipodi:start="5.8773562"
sodipodi:end="3.5475948"
sodipodi:open="true"
d="m 55.292511,259.10745 a 1.4368194,0.47309005 0 0 1 -0.440519,0.56085 1.4368194,0.47309005 0 0 1 -1.759387,-5e-5 1.4368194,0.47309005 0 0 1 -0.440224,-0.56087" />
<path
id="path3054-3-7"
style="fill:none;stroke:#abc837;stroke-width:0.13006206;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
sodipodi:type="arc"
sodipodi:cx="53.972397"
sodipodi:cy="258.8912"
sodipodi:rx="1.4368194"
sodipodi:ry="0.47309005"
sodipodi:start="5.9082337"
sodipodi:end="3.5426036"
sodipodi:open="true"
d="m 55.309394,258.71795 a 1.4368194,0.47309005 0 0 1 -0.479055,0.55275 1.4368194,0.47309005 0 0 1 -1.745625,-0.007 1.4368194,0.47309005 0 0 1 -0.435149,-0.55668" />
<ellipse
id="path3054-3-7-8"
style="fill:none;fill-opacity:1;stroke:#abc837;stroke-width:0.13006206;stroke-linecap:square;stroke-linejoin:round;stroke-opacity:1"
cx="53.972397"
cy="258.48816"
rx="1.4368194"
ry="0.47309005" />
</g>
</g>
</svg>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment