@ebl-vue/editor-render 2.31.25

package/src/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/src/styles/underline.css

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

package/src/types.ts

@@ -0,0 +1,5 @@
+export interface IBlock{
+  id: string;
+  type: string;
+  data: any;
+}

package/src/utils/index.ts

@@ -0,0 +1,15 @@
+
+
+export default {
+  copy: (o: any) => {
+    return JSON.parse(JSON.stringify(o));
+  },
+  createUniqueString: () => {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+      const r = Math.random() * 16 | 0;
+      const v = c === 'x' ? r : (r & 0x3 | 0x8);
+      console.log(v)
+      return v.toString(16);
+    });
+  }
+}

package/src/utils/install.ts

@@ -0,0 +1,19 @@
+import type { SFCWithInstall } from 'types'
+import type {App} from 'vue'
+export const withInstall = <T, E extends Record<string, any>>(
+  main: T,
+  extra?: E
+) => {
+  ;(main as SFCWithInstall<T>).install = (app:App): void => {
+    for (const comp of [main, ...Object.values(extra ?? {})]) {
+      app.component(comp.name, comp)
+    }
+  }
+
+  if (extra) {
+    for (const [key, comp] of Object.entries(extra)) {
+      ;(main as any)[key] = comp
+    }
+  }
+  return main as SFCWithInstall<T> & E
+}

package/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "sourceMap": false,
+    "allowJs": true,
+    "noUnusedLocals": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "removeComments": false,
+    "jsx": "preserve",    
+    "baseUrl": "./",
+    "declaration":true,
+    "declarationDir": "./types",
+    "skipLibCheck":true,
+    "rootDir": ".",
+    "lib": [
+      "ES2017",
+      "ES2018",
+      "ES2019",
+      "DOM"
+    ],
+    "paths": {
+     "@/*": ["./src/*"],
+     "@/types": [ "./types/" ],
+     "@/types/*": [ "./types/*" ],
+    }
+  },
+  "include": [
+    "./src/index.ts",
+    "./src/**/*",   
+    "./types/index.d.ts"
+  ]
+}

package/types/index.d.ts

@@ -0,0 +1,19 @@
+
+ import type { Plugin } from 'vue' 
+ export type SFCWithInstall<T> = T & Plugin
+
+import type { INSTALLED_KEY } from '@/constants'
+
+
+declare module 'vue' {
+  export interface App {
+    [INSTALLED_KEY]?: boolean
+  }
+   export interface GlobalComponents {
+   EblEditorRender: typeof import('@ebl-vue/editor-render')['EblEditorRender'],
+    
+  }
+};
+
+
+ export {}

package/vite.config.ts

@@ -0,0 +1,80 @@
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import { defineConfig, UserConfig, ConfigEnv } from 'vite'
+import path from 'path';
+import dts from "vite-plugin-dts";
+import terser from '@rollup/plugin-terser'
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
+import { viteStaticCopy } from 'vite-plugin-static-copy'
+
+export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
+
+  return {
+    plugins: [
+      //cssInjectedByJsPlugin(),
+      vue(),
+      vueJsx(),      
+      dts({
+        rollupTypes: true,
+        tsconfigPath: "./tsconfig.json",
+        insertTypesEntry: true,
+        pathsToAliases:true
+      }),
+      viteStaticCopy({
+        targets: [
+          {
+            src: 'src/styles/*',
+            dest: 'styles/',
+          },
+        ],
+      }),
+      
+    ],
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "src"),
+        
+      },
+    },
+    build: {
+      
+      target: 'es2018',
+      emptyOutDir: true,
+      sourcemap:true,
+      lib: {
+        entry: path.resolve(__dirname,"src","index.ts"),     
+        name: '@ebl-vue/editor-render',
+        formats:['es'],
+        fileName: format => `index.mjs`,
+        cssFileName: 'style',
+      },
+      rollupOptions: {
+        plugins: [
+          terser({
+            compress: {
+              drop_console:true,
+              drop_debugger: true
+            },
+            format: {
+              comments:false
+            }
+          }),
+         
+        ],
+        external: [
+          'vue',          
+          'shiki',         
+        ],
+        output: [
+          {
+            exports: 'named',            
+            globals: {
+              vue: 'Vue'       
+            }
+          }
+        ],
+      },
+
+    }
+  }
+});