@ebl-vue/editor-render 2.31.25

package/dist/styles/table.css

@@ -0,0 +1,388 @@
+.tc-wrap {
+  --color-background: #f9f9fb;
+  --color-text-secondary: #7b7e89;
+  --color-border: #e8e8eb;
+  --cell-size: 34px;
+  --toolbox-icon-size: 18px;
+  --toolbox-padding: 6px;
+  --toolbox-aiming-field-size: calc(var(--toolbox-icon-size) + var(--toolbox-padding)*2);
+  --col-width: 100px 100px 100px;
+  position: relative;
+  height: 100%;
+  /* width: 100%; */
+  margin-top: var(--toolbox-icon-size);
+  box-sizing: border-box;
+  display: inline-grid;
+  
+  z-index: 0
+}
+
+.tc-wrap--readonly {
+
+}
+
+.tc-wrap svg {
+  vertical-align: top
+}
+
+@media print {
+  .tc-wrap {
+    border-left-color: var(--color-border);
+    border-left-style: solid;
+    border-left-width: 1px;
+   
+  }
+}
+
+@media print {
+  .tc-wrap .tc-row:after {
+    display: none
+  }
+}
+
+.tc-table {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  font-size: 14px;
+  border-top: 1px solid var(--color-border);
+  border-left: 1px solid var(--color-border);
+  line-height: 1.4;
+  overflow-x: auto;
+}
+
+.tc-table:after {
+  width: calc(var(--cell-size));
+  height: 100%;
+  left: calc(var(--cell-size)*-1);
+  top: 0
+}
+
+.tc-table:after,
+.tc-table:before {
+  position: absolute;
+  content: ""
+}
+
+.tc-table:before {
+  width: 100%;
+  height: var(--toolbox-aiming-field-size);
+  top: calc(var(--toolbox-aiming-field-size)*-1);
+  left: 0
+}
+
+.tc-table--heading .tc-row:first-child {
+  font-weight: 600;
+  border-bottom: 2px solid var(--color-border);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--color-background)
+}
+
+.tc-table--heading .tc-row:first-child [contenteditable]:empty:before {
+  content: attr(heading);
+  color: var(--color-text-secondary)
+}
+
+.tc-table--heading .tc-row:first-child:after {
+  bottom: -2px;
+  border-bottom: 2px solid var(--color-border)
+}
+
+.tc-add-column,
+.tc-add-row {
+  display: flex;
+  color: var(--color-text-secondary)
+}
+
+@media print {
+  .tc-add {
+    display: none
+  }
+}
+
+.tc-add-column {
+  display: grid;
+  border-top: 1px solid var(--color-border);
+  
+  grid-auto-rows: var(--cell-size);
+  place-items: center
+}
+
+.tc-add-column svg {
+  padding: 5px;
+  position: sticky;
+  top: 0;
+  background-color: var(--color-background)
+}
+
+.tc-add-column--disabled {
+  visibility: hidden
+}
+
+@media print {
+  .tc-add-column {
+    display: none
+  }
+}
+
+.tc-add-row {
+  height: var(--cell-size);
+  align-items: center;
+  padding-left: 4px;
+  position: relative
+}
+
+.tc-add-row--disabled {
+  display: none
+}
+
+.tc-add-row:before {
+  content: "";
+  position: absolute;
+  right: calc(var(--cell-size)*-1);
+  width: var(--cell-size);
+  height: 100%
+}
+
+@media print {
+  .tc-add-row {
+    display: none
+  }
+}
+
+.tc-add-column,
+.tc-add-row {
+  transition: 0s;
+  cursor: pointer;
+  will-change: background-color
+}
+
+.tc-add-column:hover,
+.tc-add-row:hover {
+  transition: background-color .1s ease;
+  background-color: var(--color-background)
+}
+
+.tc-add-row {
+  margin-top: 1px
+}
+
+.tc-add-row:hover:before {
+  transition: .1s;
+  background-color: var(--color-background)
+}
+
+.tc-row {
+  display: grid;
+  /* grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); */
+  /* grid-template-columns: 100px 100px 100px; */
+  grid-template-columns:var(--col-width);
+  position: relative;
+  border-bottom: 1px solid var(--color-border)
+}
+
+/* .tc-row:after {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  width: var(--cell-size);
+  height: 100%;
+  bottom: -1px;
+  right: calc(var(--cell-size)*-1);
+  border-bottom: 1px solid var(--color-border)
+} */
+
+.tc-row--selected {
+  background: var(--color-background)
+}
+
+.tc-row--selected:after {
+  background: var(--color-background)
+}
+
+.tc-cell {
+  border-right: 1px solid var(--color-border);
+  padding: 6px 12px;
+  overflow: hidden;
+  outline: none;
+  line-break: normal
+}
+
+.tc-cell--selected {
+  background: var(--color-background)
+}
+
+.tc-wrap--readonly .tc-row:after {
+  display: none
+}
+
+.tc-toolbox {
+  --toolbox-padding: 6px;
+  --popover-margin: 30px;
+  --toggler-click-zone-size: 30px;
+  --toggler-dots-color: #7b7e89;
+  --toggler-dots-color-hovered: #1d202b;
+  position: absolute;
+  cursor: pointer;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity .1s;
+  will-change: left, opacity
+}
+
+.tc-toolbox--column {
+  top: calc(var(--toggler-click-zone-size)*-1);
+  transform: translate(calc(var(--toggler-click-zone-size)*-1/2));
+  will-change: left, opacity
+}
+
+.tc-toolbox--row {
+  left: calc(var(--popover-margin)*-1);
+  transform: translateY(calc(var(--toggler-click-zone-size)*-1/2));
+  margin-top: -1px;
+  will-change: top, opacity
+}
+
+.tc-toolbox--showed {
+  opacity: 1
+}
+
+.tc-toolbox .tc-popover {
+  position: absolute;
+  top: 0;
+  left: var(--popover-margin)
+}
+
+.tc-toolbox__toggler {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--toggler-click-zone-size);
+  height: var(--toggler-click-zone-size);
+  color: var(--toggler-dots-color);
+  opacity: 0;
+  transition: opacity .15s ease;
+  will-change: opacity
+}
+
+.tc-toolbox__toggler:hover {
+  color: var(--toggler-dots-color-hovered)
+}
+
+.tc-toolbox__toggler svg {
+  fill: currentColor
+}
+
+.tc-wrap:hover .tc-toolbox__toggler {
+  opacity: 1
+}
+
+.tc-settings .cdx-settings-button {
+  width: 50%;
+  margin: 0
+}
+
+.tc-popover {
+  --color-border: #eaeaea;
+  --color-background: #fff;
+  --color-background-hover: rgba(232, 232, 235, .49);
+  --color-background-confirm: #e24a4a;
+  --color-background-confirm-hover: #d54040;
+  --color-text-confirm: #fff;
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  box-shadow: 0 3px 15px -3px #0d142121;
+  border-radius: 6px;
+  padding: 6px;
+  display: none;
+  will-change: opacity, transform
+}
+
+.tc-popover--opened {
+  display: flex;
+  animation: menuShowing .1s cubic-bezier(.215, .61, .355, 1) forwards
+}
+
+.tc-popover__item {
+  display: flex;
+  align-items: center;
+  padding: 2px 14px 2px 2px;
+  border-radius: 5px;
+  cursor: pointer;
+  white-space: nowrap;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none
+}
+
+.tc-popover__item:hover {
+  background: var(--color-background-hover)
+}
+
+.tc-popover__item:not(:last-of-type) {
+  margin-bottom: 2px
+}
+
+.tc-popover__item-icon {
+  display: inline-flex;
+  width: 26px;
+  height: 26px;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-background);
+  border-radius: 5px;
+  border: 1px solid var(--color-border);
+  margin-right: 8px
+}
+
+.tc-popover__item-label {
+  line-height: 22px;
+  font-size: 14px;
+  font-weight: 500
+}
+
+.tc-popover__item--confirm {
+  background: var(--color-background-confirm);
+  color: var(--color-text-confirm)
+}
+
+.tc-popover__item--confirm:hover {
+  background-color: var(--color-background-confirm-hover)
+}
+
+.tc-popover__item--confirm .tc-popover__item-icon {
+  background: var(--color-background-confirm);
+  border-color: #0000001a
+}
+
+.tc-popover__item--confirm .tc-popover__item-icon svg {
+  transition: transform .2s ease-in;
+  transform: rotate(90deg) scale(1.2)
+}
+
+.tc-popover__item--hidden {
+  display: none
+}
+
+@keyframes menuShowing {
+  0% {
+    opacity: 0;
+    transform: translateY(-8px) scale(.9)
+  }
+
+  70% {
+    opacity: 1;
+    transform: translateY(2px)
+  }
+
+  to {
+    transform: translateY(0)
+  }
+}
+
+.cell-resizable {
+  cursor: col-resize;
+}

package/dist/styles/underline.css

@@ -0,0 +1,3 @@
+.cdx-underline {
+    text-decoration: underline;
+}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@ebl-vue/editor-render",
+  "version": "2.31.25",
+  "type": "module",
+  "author": "lrj525@sina.com",
+  "description": "用于渲染editor-full编辑器内容",
+  "homepage": "",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    },
+    "./styles/*": "./dist/styles/*"
+  },
+  "scripts": {
+    "dev": "rimraf dist && vite build --watch",
+    "build": "rimraf dist && vite build"
+  },
+  "main": "./dist/index.mjs",
+  "module": "./dist/indexs.mjs",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/index.d.ts",
+        "./types/index.d.ts"
+      ]
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "style": "dist/style.css",
+  "sideEffects": [
+    "dist/*",
+    "dist/styles/*.css"
+  ],
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "ssh://git@git.jianguodata.com:9082/lirujin/ebl-vue.git"
+  },
+  "dependencies": {
+    "shiki": "^3.21.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-static-copy": "^3.1.4"
+  }
+}

package/src/EditorRender.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="ebl-editor-render">
+    <template v-for="block in data.blocks">
+      <div class="ce-block" :data-id="block.id">
+        <div :class="`ce-tune-alignment--${block.tunes.blockAlignment.alignment}`">
+          <div :style="`padding-left: ${block.tunes.indent.indentLevel*48}px;`">
+            <component :is="'ebl'+block.type" :block="block"></component>
+          </div>
+        </div>
+      </div>
+    </template>
+    <div class="ebl-outline" >
+      <div style="height: 5000px">
+        dd 
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import "./styles/index.css"
+
+interface Props {
+  data: any,
+  locale: any
+}
+const props = withDefaults(defineProps<Props>(), {
+  data: ()=>({
+    blocks: []
+  }),
+  locale: {},
+ 
+
+});
+
+defineOptions({
+  name: 'EblEditorRender',
+  inheritAttrs: false
+})
+
+</script>
+<style scoped>
+
+</style>

package/src/components/List.vue

@@ -0,0 +1,40 @@
+<template>
+  <ul v-if="block.data.style==='unordered'" class="cdx-list cdx-list-unordered">
+    <li class="cdx-list__item" v-for="(item, index) in block.data.items" :key="index">
+      <div class="cdx-list__item-content" v-html="item.content"></div>
+    </li>
+  </ul>
+  <ol v-if="block.data.style==='ordered'" class="cdx-list cdx-list-ordered" :style="`--list-counter-type: ${block.data.meta.counterType};`">
+    <li class="cdx-list__item" v-for="(item, index) in block.data.items" :key="index">
+      <div class="cdx-list__item-content" v-html="item.content"></div>
+    </li>
+  </ol>
+  <ul v-if="block.data.style==='checklist'" class="cdx-list cdx-list-checklist">
+    <li class="cdx-list__item" v-for="(item, index) in block.data.items" :key="index">
+      <div class="cdx-list__checkbox  cdx-list__checkbox-check--disabled" :class="{'cdx-list__checkbox--checked':item.meta.checked}">
+        <span class="cdx-list__checkbox-check"><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="M7 12L10.4884 15.8372C10.5677 15.9245 10.705 15.9245 10.7844 15.8372L17 9"></path>
+          </svg></span>
+      </div>
+      <div class="cdx-list__item-content" v-html="item.content"></div>
+    </li>
+  </ul>
+</template>
+<script lang="ts" setup>
+import type { IBlock } from '../types';
+defineOptions({
+  name: 'eblList',
+  inheritAttrs: false
+})
+
+const block = defineModel<IBlock>("block", {
+  default: {
+    id: "",
+    type: "",
+    data: {}
+  },
+});
+
+</script>

package/src/components/alert.vue

@@ -0,0 +1,21 @@
+<template>
+  <div :class="`cdx-alert cdx-alert-${block.data.type} cdx-alert-align-${block.data.align}`" >
+    <div class="cdx-alert__message"   v-html="block.data.message"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+import type { IBlock } from '../types';
+defineOptions({
+  name: 'eblalert',
+  inheritAttrs: false
+})
+
+const block = defineModel<IBlock>("block", {
+  default: {
+    id: "",
+    type: "",
+    data: {}
+  },
+});
+
+</script>

package/src/components/code.vue

@@ -0,0 +1,114 @@
+<template>
+  <div :class="`cdx-block ce-editorjs-x-shiki`" :style="`${shikiContent?.preStyle}`">    
+    <div class="ce-editorjs-x-shiki__selector">
+      <div class="ce-editorjs-x-shiki__lang">{{block.data.lang}}</div>
+      <div class="ce-editorjs-x-shiki__copy" ref="copyRef">
+        <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-linejoin="round" stroke-width="2"
+            d="M17.25 8.5H10.25C9.2835 8.5 8.5 9.2835 8.5 10.25V17.25C8.5 18.2165 9.2835 19 10.25 19H17.25C18.2165 19 19 18.2165 19 17.25V10.25C19 9.2835 18.2165 8.5 17.25 8.5Z">
+          </path>
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M15.5 8.5V6.75C15.5 6.28587 15.3156 5.84075 14.9874 5.51256C14.6592 5.18437 14.2141 5 13.75 5H6.75C6.28587 5 5.84075 5.18437 5.51256 5.51256C5.18437 5.84075 5 6.28587 5 6.75V13.75C5 14.2141 5.18437 14.6592 5.51256 14.9874C5.84075 15.3156 6.28587 15.5 6.75 15.5H8.5">
+          </path>
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M12 12L15.5 12"></path>
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M12 15.5L15.5 15.5"></path>
+        </svg>
+        <div class="ce-editorjs-x-shiki__copy_tip">已复制</div>
+      </div>
+    </div>
+    <div ref="codeRef" class="ce-editorjs-x-shiki__code" :style="`height:${block.data.resizeSize}px`">
+      <span v-html="shikiContent?.html"></span>
+    </div>
+    <div class="ce-editorjs-x-shiki__code__dragHandler" @mousedown="dragStartHandler"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+import type { IBlock } from '../types';
+import { codeToHtml } from 'shiki'
+import { asyncComputed } from '@vueuse/core'
+
+defineOptions({
+  name: 'eblcode',
+  inheritAttrs: false
+})
+const codeRef = ref<HTMLElement | null>(null);
+const block = defineModel<IBlock>("block", {
+  default: {
+    id: "",
+    type: "",
+    data: {}
+  },
+});
+
+const shikiContent = asyncComputed(async () => {
+  let preStyle = ''
+  const html = await codeToHtml(block.value.data.code, {
+    lang: block.value.data.lang,
+    theme: block.value.data.theme || "github-dark-dimmed",
+
+    transformers: [
+      {
+        preprocess(code) {
+          // if (code.endsWith('\n'))
+          return `${code}\n`
+        },
+        pre(node) {
+          this.addClassToHast(node, 'ce-editorjs-x-shiki__span')
+          preStyle = node.properties?.style as string || ''
+        },
+        line(node, line) {
+          node.properties = node.properties || {};
+          node.properties['data-line'] = line;
+
+        }
+
+      }
+    ]
+  })
+
+  return {
+    html,
+    preStyle
+  }
+
+});
+
+function dragStartHandler(e: MouseEvent) {
+  if(!codeRef.value) return;
+  resize(codeRef.value, e);
+}
+  function resize(codeElement: HTMLElement, event: MouseEvent) {
+    let startY = event.clientY;
+    let startHeight = parseInt(window.getComputedStyle(codeElement).height, 10);
+    const mouseMoveHandler = (e: MouseEvent) => {
+      const dY = e.clientY - startY;
+      let newHeight = startHeight + dY;
+      if (newHeight < 100) {
+        newHeight = 100;        
+      }
+      codeElement.style.height = newHeight + 'px';
+    };
+    const mouseUpHandler = () => {
+      
+  
+      document.removeEventListener('mousemove', mouseMoveHandler);
+      document.removeEventListener('mouseup', mouseUpHandler);
+    };
+
+    document.addEventListener('mousemove', mouseMoveHandler);
+    document.addEventListener('mouseup', mouseUpHandler);
+  }
+</script>
+<style scoped>
+.ce-editorjs-x-shiki__code {
+  overflow: auto;
+}
+.ce-editorjs-x-shiki__selector{
+  padding: 0 8px;
+  align-items: center;
+}
+</style>

package/src/components/delimiter.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="ce-delimiter cdx-block"><div class="ce-delimiter__line__wrapper"><div class="ce-delimiter__line"></div></div></div>
+</template>
+<script lang="ts" setup>
+import type { IBlock } from '../types';
+defineOptions({
+  name: 'ebldelimiter',
+  inheritAttrs: false
+})
+
+// const block = defineModel<IBlock>("block", {
+//   default: {
+//     id: "",
+//     type: "",
+//     data: {}
+//   },
+// });
+
+</script>

package/src/components/h1.vue

@@ -0,0 +1,19 @@
+<template>
+  <h1 class="ce-header" v-html="block.data.text"></h1>
+</template>
+<script lang="ts" setup>
+import type { IBlock } from '../types';
+defineOptions({
+  name: 'eblh1',
+  inheritAttrs: false
+})
+
+const block = defineModel<IBlock>("block", {
+  default: {
+    id: "",
+    type: "",
+    data: {}
+  },
+});
+
+</script>