diff --git a/example/example.html b/example/example.html
index 7cbb1c867..2102c2539 100644
--- a/example/example.html
+++ b/example/example.html
@@ -31,25 +31,24 @@
-
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
@@ -75,7 +74,7 @@
class: Term,
shortcut: 'CMD+SHIFT+M'
},
- image: SimpleImageTool,
+ image: SimpleImage,
list: {
class: List,
inlineToolbar: true
diff --git a/example/plugins/simple-image/simple-image.css b/example/plugins/simple-image/simple-image.css
deleted file mode 100644
index 81e5e62ca..000000000
--- a/example/plugins/simple-image/simple-image.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.cdx-simple-image {
-
-}
-
-.cdx-simple-image .cdx-loader {
- min-height: 200px;
-}
-
-.cdx-simple-image .cdx-input {
- margin-top: 10px;
-}
-
-.cdx-simple-image img {
- max-width: 100%;
- vertical-align: bottom;
-}
-
-.cdx-simple-image__picture--with-background {
- background: #eff2f5;
- padding: 10px;
-}
-
-.cdx-simple-image__picture--with-background img {
- display: block;
- max-width: 60%;
- margin: 0 auto;
-}
-
-.cdx-simple-image__picture--with-border {
- border: 1px solid var(--color-gray-border);
- padding: 1px;
-}
-
-.cdx-simple-image__picture--stretched img {
- max-width: none;
- width: 100%;
-}
diff --git a/example/plugins/simple-image/simple-image.js b/example/plugins/simple-image/simple-image.js
deleted file mode 100644
index 5866f01d5..000000000
--- a/example/plugins/simple-image/simple-image.js
+++ /dev/null
@@ -1,230 +0,0 @@
-/**
- * SimpleImage Tool for the CodeX Editor
- * Works only with pasted image URLs, don't requires server-side uploader.
- *
- * @typedef {object} SimpleImageData
- * @description Tool's input and output data format
- * @property {string} url — image URL
- * @property {string} caption — image caption
- * @property {boolean} withBorder - should image be rendered with border
- * @property {boolean} withBackground - should image be rendered with background
- * @property {boolean} stretched - should image be stretched to full width of container
- */
-class SimpleImageTool {
- /**
- * @param {SimpleImageData} imageData
- * @param {object} config - user config for Tool
- * @param {object} api - CodeX Editor API
- */
- constructor(imageData, config, api) {
- /**
- * CodeX Editor API
- */
- this.api = api;
-
- /**
- * Styles
- */
- this.CSS = {
- baseClass: this.api.styles.block,
- loading: this.api.styles.loader,
- input: this.api.styles.input,
- settingsButton: this.api.styles.settingsButton,
- settingsButtonActive: this.api.styles.settingsButtonActive,
-
- /**
- * Tool's classes
- */
- wrapper: 'cdx-simple-image',
- imageHolder: 'cdx-simple-image__picture',
- };
-
- /**
- * Tool's initial data
- */
- this.data = {
- url: imageData.url || '',
- caption: imageData.caption || '',
- withBorder: imageData.withBorder !== undefined ? imageData.withBorder : false,
- withBackground: imageData.withBackground !== undefined ? imageData.withBackground : false,
- stretched: imageData.stretched !== undefined ? imageData.stretched : false,
- };
-
- /**
- * Nodes cache
- */
- this.nodes = {
- wrapper: null,
- imageHolder: null,
- };
-
- /**
- * Available Image settings
- */
- this.settings = [
- {
- name: 'withBorder',
- icon: ``
- },
- {
- name: 'stretched',
- icon: ``
- },
- {
- name: 'withBackground',
- icon: ``
- },
- ];
- }
-
- /**
- * Creates a Block:
- * 1) Show preloader
- * 2) Start to load an image
- * 3) After loading, append image and caption input
- * @public
- */
- render() {
- let wrapper = this._make('div', [this.CSS.baseClass, this.CSS.wrapper]),
- loader = this._make('div', this.CSS.loading),
- imageHolder = this._make('div', this.CSS.imageHolder),
- image = this._make('img'),
- caption = this._make('div', this.CSS.input, {
- contentEditable: 'true',
- innerHTML: this.data.caption || ''
- });
-
- caption.dataset.placeholder = 'Enter a caption';
-
- image.src = this.data.url;
- wrapper.appendChild(loader);
-
- image.onload = () => {
- wrapper.classList.remove(this.CSS.loading);
- imageHolder.appendChild(image);
- wrapper.appendChild(imageHolder);
- wrapper.appendChild(caption);
- loader.remove();
- this._acceptTuneView();
- };
-
- image.onerror = () => {
- // @todo use api.Notifies.show() to show error notification
- console.log('Failed to load an image');
- };
-
- this.nodes.imageHolder = imageHolder;
- this.nodes.wrapper = wrapper;
-
- return wrapper;
- }
-
- /**
- * @public
- * Saving method
- * @param {Element} blockContent - Tool's wrapper
- * @return {SimpleImageData}
- */
- save(blockContent) {
- let image = blockContent.querySelector('img'),
- caption = blockContent.querySelector('.' + this.CSS.input);
-
- if (!image){
- return this.data;
- }
-
- return Object.assign(this.data, {
- url: image.src,
- caption: caption.innerHTML
- });
- }
-
- /**
- * Specify paste pattern
- * @see {@link ../../../docs/tools.md#patterns-handling}
- * @public
- */
- static get onPaste() {
- return {
- patterns: {
- image: /https?:\/\/\S+\.(gif|jpe?g|tiff|png)$/i
- },
- patternHandler: (text) => {
- return {
- url: text
- };
- },
- };
- }
-
- /**
- * Makes buttons with tunes: add background, add border, stretch image
- * @return {HTMLDivElement}
- */
- renderSettings() {
- let wrapper = document.createElement('div');
-
- this.settings.forEach( tune => {
- let el = document.createElement('div');
- el.classList.add(this.CSS.settingsButton);
- el.innerHTML = tune.icon;
-
- el.addEventListener('click', () => {
- this._toggleTune(tune.name);
- el.classList.toggle(this.CSS.settingsButtonActive);
- });
-
- el.classList.toggle(this.CSS.settingsButtonActive, this.data[tune.name]);
-
- wrapper.appendChild(el);
- });
- return wrapper;
- };
-
- /**
- * Helper for making Elements with attributes
- *
- * @param {string} tagName - new Element tag name
- * @param {array|string} classNames - list or name of CSS classname(s)
- * @param {Object} attributes - any attributes
- * @return {Element}
- */
- _make(tagName, classNames = null, attributes = {}) {
- let el = document.createElement(tagName);
-
- if ( Array.isArray(classNames) ) {
- el.classList.add(...classNames);
- } else if( classNames ) {
- el.classList.add(classNames);
- }
-
- for (let attrName in attributes) {
- el[attrName] = attributes[attrName];
- }
-
- return el;
- }
-
- /**
- * Click on the Settings Button
- * @private
- */
- _toggleTune(tune) {
- this.data[tune] = !this.data[tune];
- this._acceptTuneView();
- }
-
- /**
- * Add specified class corresponds with activated tunes
- * @private
- */
- _acceptTuneView() {
- this.settings.forEach( tune => {
- this.nodes.imageHolder.classList.toggle(this.CSS.imageHolder + '--' + tune.name.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`), !!this.data[tune.name]);
-
- if (tune.name === 'stretched') {
- this.api.blocks.stretchBlock(this.api.blocks.getCurrentBlockIndex(), !!this.data.stretched);
- }
- });
- }
-}