@ebl-vue/editor-full 1.0.8

package/src/plugins/block-alignment/index.ts

@@ -0,0 +1,116 @@
+import "./index.css"
+import type { API, BlockTune, ToolConfig } from "@ebl-vue/editorjs/types";
+
+interface ConstructorArgs {
+  data: AlignmentData;
+  config?: ToolConfig;
+  api: API;
+  block?: any;
+}
+export interface AlignmentData {
+  text?: string;
+  alignment: string
+}
+
+export default class BlockAlignment implements BlockTune{
+  private settings: ToolConfig;
+  private block: any;
+  private api: API;
+  private data: AlignmentData;
+  private alignmentSettings: any[];
+  private _CSS: any;
+  private wrapper: HTMLElement | undefined;
+
+
+  static get DEFAULT_ALIGNMENT() {
+    return 'left';
+  }
+
+  static get isTune() {
+    return true;
+  }
+
+  getAlignment() {
+    if (!!this.settings?.blocks && this.settings.blocks.hasOwnProperty(this.block.name)) {
+      return this.settings.blocks[this.block.name]
+    }
+    if (!!this.settings?.default) {
+      return this.settings.default
+    }
+    return BlockAlignment.DEFAULT_ALIGNMENT
+  }
+
+  constructor({ api, data, config, block }: ConstructorArgs) {
+    this.api = api;
+    this.block = block;
+
+    this.settings = config;
+    this.data = data || { alignment: this.getAlignment() }
+    this.alignmentSettings = [
+      {
+        name: 'left',
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M17 7L5 7"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M17 17H5"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M13 12L5 12"/></svg>`
+      },
+      {
+        name: 'center',
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M18 7L6 7"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M18 17H6"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M16 12L8 12"/></svg>`
+      },
+      {
+        name: 'right',
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M19 7L7 7"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M19 17H7"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M19 12L11 12"/></svg>`
+      }
+    ];
+    this._CSS = {
+      alignment: {
+        left: 'ce-tune-alignment--left',
+        center: 'ce-tune-alignment--center',
+        right: 'ce-tune-alignment--right',
+      }
+    }
+  }
+
+
+  wrap(blockContent: HTMLElement) {
+    this.wrapper = document.createElement("div");
+    this.wrapper!.classList.toggle(this._CSS.alignment[this.data.alignment])
+    this.wrapper!.append(blockContent)
+    return this.wrapper
+  }
+
+
+  render() {
+    const wrapper = document.createElement("div");
+    this.alignmentSettings.map(align => {
+      const button = document.createElement('button');
+      button.classList.add(this.api.styles.settingsButton);
+      button.innerHTML = align.icon;
+      button.type = 'button';
+
+      button.classList.toggle(this.api.styles.settingsButtonActive, align.name === this.data.alignment);
+      const buttonTooltip = this.api.i18n.t(align.name + " align");
+      this.api.tooltip.onHover(button, buttonTooltip, {
+        placement: 'top',
+      });
+      wrapper.appendChild(button);
+      return button
+    }).forEach((element, index, elements) => {
+      element.addEventListener('click', () => {
+        this.data = {
+          alignment: this.alignmentSettings[index].name
+        }
+        elements.forEach((el, i) => {
+          const { name } = this.alignmentSettings[i];
+          el.classList.toggle(this.api.styles.settingsButtonActive, name === this.data.alignment);
+          this.wrapper!.classList.toggle(this._CSS.alignment[name], name === this.data.alignment)
+        });
+      });
+    });
+    return wrapper;
+  }
+
+
+  save() {
+    return this.data;
+  }
+}
+

package/src/plugins/block-alignment/readme.md

@@ -0,0 +1 @@
+# 通用的对齐插件

package/src/plugins/code/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 CodeX
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/plugins/code/index.css

@@ -0,0 +1,120 @@
+.ce-editorjs-x-shiki {
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  margin: 10px 0;
+}
+
+.ce-editorjs-x-shiki__code {
+  position: relative;
+  float: left;
+  min-width: 100%;
+  overflow-x: auto;
+}
+
+.ce-editorjs-x-shiki__selector {
+  display: flex;
+  gap: .25rem;
+  /* align-items: center; */
+  justify-content: space-between;
+  z-index: 12;
+  border-bottom-style: solid;
+  border-color: #9ca3af0d;
+  padding: .5rem;
+}
+
+.ce-editorjs-x-shiki__selector-language
+, .ce-editorjs-x-shiki__selector-theme {
+  font-size: 13px;
+  font-family: inherit;
+}
+.ce-editorjs-x-shiki__selector-language{
+  width: 90px;
+}
+
+.ce-editorjs-x-shiki__selector select {
+  border: none;
+  outline: none;
+}
+
+.ce-editorjs-x-shiki__span {
+  position: relative;
+  z-index: 0;
+  padding: 20px;
+  margin: 0;
+  white-space: pre;
+  font-size: 13px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+}
+
+.ce-editorjs-x-shiki__textarea {
+  white-space: pre;
+  overflow: hidden;
+  background-color: transparent;
+  position: absolute;
+  padding: 20px;
+  inset: 0 0 0 0;
+  color: transparent;
+  z-index: 0;
+  font-size: 13px;
+  caret-color: #999;
+  resize: none;
+  border: none;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+}
+
+.ce-editorjs-x-shiki__lang {
+  /* position: absolute;
+	line-height: 14px;
+	font-size: 10px;
+	color: #999;
+	background-color: #dcdfe6;
+	padding: 6px;
+	padding-left: 10px;
+	padding-right: 10px;
+	top: 0;
+	right: 0;
+	border-bottom-left-radius: 6px;
+	border-top-right-radius: 6px; */
+}
+
+
+.ce-editorjs-x-shiki__copy{
+  width:24px;
+  height:24px;
+  cursor: pointer;
+  position: relative;
+  margin-right: 0px;
+}
+.ce-editorjs-x-shiki__copy_tip{
+  font-size: 12px;
+	/* width: 50px; */
+  width: 60px;
+	margin-left: -20px; /* Center the tooltip */
+	background-color: #0c0c0c;
+	color: #ececec;
+	text-align: center;
+	border-radius: 6px;
+	padding: 5px 10px;
+	position: absolute;
+	z-index: 1;
+	top: 125%; /* Position the tooltip below the button */
+	transition: opacity 0.3s;
+	visibility: hidden;
+  opacity: 0;
+}
+.ce-editorjs-x-shiki__copy_tip::after {
+	content: "";
+	position: absolute;
+	bottom: 100%; /* Bottom of the tooltip */
+	left: 50%;
+	margin-left: -5px;
+	border-width: 5px;
+	border-style: solid;
+	border-color: transparent transparent #0c0c0c transparent;
+}
+
+.ce-editorjs-x-shiki__copy_tip.visible {
+	visibility: visible;
+	opacity: 1;
+}