@ibiz-template/vue3-components 0.7.41-alpha.1 → 0.7.41-alpha.100

package/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.scss

@@ -0,0 +1,412 @@
+$markdown: (
+  'width': 100%,
+  color-manual-toolbar-bg-save: getCssVar(color,primary),
+  color-manual-toolbar-text-save: getCssVar(color, primary-active-text),
+  color-manual-toolbar-text-cancel: getCssVar(color,text,1),
+  color-manual-toolbar-text-cancel-hover: getCssVar(color,primary),
+  color-dark-scrollbar-thumb-dark: rgb(var(#{getCssVarName(grey,4)})),
+  color-light-scrollbar-thumb-dark:rgb(var(#{getCssVarName(grey,4)})),
+  color-scrollbar-thumb-dark-hover: rgba(var(#{getCssVarName(grey,4)}),.5),
+  color-dark-toc-text: getCssVar(color, fill, 0),
+  color-toc-header-text: getCssVar(color, text, 0),
+  color-dark-mardown-border: rgb(var(#{getCssVarName(grey,2)})),
+  color-fixed-toc-text: getCssVar(color, black),
+  color-fixed-toc-arrow-text: getCssVar(color, primary), 
+  spacing-manual-toolbar-height: 32px,
+  spacing-manual-toolbar-gap: getCssVar('spacing',base),
+  spacing-manual-toolbar-item-padding: 0 getCssVar('spacing',base),
+  spacing-manual-toolbar-margin: getCssVar('spacing',base-tight) getCssVar('spacing',tight) 0 0,
+  spacing-manual-toolbar-fullscreen-height: getCssVar(height,control-default), 
+  spacing-manual-toolbar-fullscreen-padding: 0 getCssVar('spacing',extra-loose),
+  spacing-manual-toolbar-fullscreen-height-header: getCssVar(spacing, super-loose),
+  height-manual-toolbar-height: getCssVar(height,control-default),
+  border-radius-manual-toolbar-item: getCssVar('border-radius', small),
+  border-manual-toolbar-fullscreen-footer: 1px solid getCssVar(color, border),
+  
+  // Other
+  'img-preview-top': -32px,
+  'img-preview-right': -36px,
+  'img-preview-width': 32px,
+  'img-preview-height': 32px,
+);
+
+
+@include b(markdown) {
+  @include set-component-css-var('markdown', $markdown);
+
+  @include e('header'){
+    display: flex;
+    flex-shrink: 0;
+    gap: getCssVar('markdown', 'spacing-manual-toolbar-gap');
+    align-items: center;
+    justify-content: end;
+    height: getCssVar('markdown', 'spacing-manual-toolbar-height');
+    @include m('edit'){
+      cursor: pointer;
+    }
+    @include m('full'){ 
+      cursor: pointer;
+    }
+    @include when('fullscreen'){
+      position: fixed;
+      top: 0;
+      right: 0;
+      left: 0;
+      z-index: 1000;
+      width: 100%;
+      height: calc(getCssVar('markdown', 'spacing-manual-toolbar-fullscreen-height-header'));
+      padding: getCssVar('markdown', 'spacing-manual-toolbar-fullscreen-padding');
+      margin-top: 0; 
+      background-color: var(--ibiz-view-bg-color);
+
+      & + .ibiz-markdown-cherry .cherry.fullscreen{
+        top: calc(getCssVar('markdown', 'spacing-manual-toolbar-fullscreen-height-header'));
+        height: calc(100% - #{getCssVar('markdown', 'spacing-manual-toolbar-fullscreen-height-header')});
+      }
+    }
+
+  }
+
+  @include e('footer'){
+    display: flex;
+    gap: getCssVar('markdown', 'spacing-manual-toolbar-gap');
+    align-items: center;
+    justify-content: end;
+    height: getCssVar('markdown', 'spacing-manual-toolbar-height');
+    margin: getCssVar('markdown', 'spacing-manual-toolbar-margin');
+    @include m('save'){
+      height: getCssVar('markdown', 'height-manual-toolbar-height');
+      padding: getCssVar('markdown', 'spacing-manual-toolbar-item-padding');
+      line-height: getCssVar('markdown', 'height-manual-toolbar-height');
+      color: getCssVar('markdown', 'color-manual-toolbar-text-save');
+      text-align: center;
+      cursor: pointer;
+      background-color:getCssVar('markdown', 'color-manual-toolbar-bg-save');
+      border-radius: getCssVar('markdown', 'border-radius-manual-toolbar-item');
+    }
+    @include m('cancel'){
+      color: getCssVar('markdown', 'color-manual-toolbar-text-cancel');
+      cursor: pointer;
+
+      &:hover{
+        color: getCssVar('markdown', 'color-manual-toolbar-text-cancel-hover');
+      }
+    }
+    @include when('fullscreen'){
+      position: fixed;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 1000;
+      width: 100%;
+      height: calc(getCssVar('markdown', 'spacing-manual-toolbar-fullscreen-height') * 2);
+      padding: getCssVar('markdown', 'spacing-manual-toolbar-fullscreen-padding');
+      margin-top: 0; 
+      background-color: var(--ibiz-view-bg-color);
+      border-top: getCssVar('markdown', 'border-manual-toolbar-fullscreen-footer');
+
+      & + .ibiz-markdown-cherry .cherry.fullscreen{
+        height: calc(100% - #{getCssVar('markdown', 'spacing-manual-toolbar-fullscreen-height')} * 2);
+      }
+    }
+  }
+
+  @include e('img-preview') {
+    // 图片预览样式，默认需不占位
+    &.el-image {
+      position: absolute;
+      height: 0;
+    }
+
+    // 图片预览态样式
+    .el-image-viewer__wrapper {
+      width: 90%;
+      height: 90%;
+      margin: auto;
+    }
+
+    .el-image-viewer__mask {
+      position: fixed;
+      width: 100vw;
+      height: 100vh;
+      cursor: zoom-out;
+      opacity: 0.7;
+    }
+
+    // 图片预览态关闭按钮样式
+    .el-image-viewer__close {
+      top: getCssVar('markdown', 'img-preview-top');
+      right: getCssVar('markdown', 'img-preview-right');
+      width: getCssVar('markdown', 'img-preview-width');
+      height: getCssVar('markdown', 'img-preview-height');
+    }
+  }
+
+  @include b(markdown-cherry) {
+    width: getCssVar('markdown', 'width');
+    outline: none;
+
+    .cherry {
+      width: 100%;
+      border: 1px solid getCssVar(color, border);
+      box-shadow: none;
+
+      .cherry-toolbar {
+        box-shadow: none;
+      }
+
+      .cherry-editor {
+        border-top: 1px solid getCssVar(color, border);
+      }
+
+      .cherry-previewer{
+        border-top: 1px solid getCssVar(color, border);
+        
+        // 调整预览区图片鼠标移入样式
+        img {
+          cursor: zoom-in;
+        }
+      }
+
+      .cherry-sidebar{
+        top: 49px;
+        border-left: 1px solid getCssVar(color, border);
+        box-shadow: none;
+      }
+
+      .cherry-floatmenu {
+        left: 50% !important;
+        margin: 0;
+        transform: translateX(-50%);
+      }
+
+      .CodeMirror-placeholder {
+        color: getCssVar(form-item, placeholder-color);
+      }
+
+      // 下拉菜单英文模式下防止换行
+      .cherry-dropdown {
+        width: min-content;
+      }
+
+      .cherry-dropdown-item {
+        white-space: nowrap;
+      }
+    }
+  }
+
+  @include when(disabled) {
+    .cherry {
+      min-height: auto;
+    }
+
+    .#{bem('markdown__fullscreen')} {
+      position: absolute;
+      top: 8px;
+      right: 12px;
+      z-index: 98;
+      font-size: getCssVar('font-size', 'regular');
+      line-height: 2.8;
+    }
+
+    .theme__dark .#{bem('markdown__fullscreen')} {
+      color: getCssVar(color, text, 0);
+
+      &:hover {
+        background-color: getCssVar(color, bg, 3);
+      }
+    }
+  }
+
+  @include when(manual){
+    display: flex;
+    flex-direction: column; 
+    .#{bem(markdown-cherry)}{
+      flex-grow: 1;
+      height: calc(100% - #{getCssVar('markdown', 'spacing-manual-toolbar-height')})!important;
+    }
+
+    .cherry.fullscreen .cherry-previewer{
+      padding-top: getCssVar('markdown', 'spacing-manual-toolbar-fullscreen-height-header');
+    }
+    @include when(editing){
+      flex-direction: column-reverse;
+
+      .cherry.fullscreen{
+        height: calc(100% - getCssVar('markdown', 'spacing-manual-toolbar-fullscreen-height') * 2);
+      }
+    }
+
+    .#{bem(markdown-menu)} {
+      display: none;
+    }
+
+    @include when(editing) {
+      .#{bem(markdown-menu)} {
+        display: block;
+      }
+    }
+  }
+
+  @include when('show-editor-switch-menu') {
+    .#{bem(composite-form-item-ex-menu)} {
+      #{getCssVarName('composite-form-item-ex', 'menu-height')}: 47px;
+      #{getCssVarName('composite-form-item-ex', 'menu-padding')}: getCssVar('spacing', 'tight') getCssVar('spacing', 'base-tight') 0;
+      max-height: 100%;
+    }
+
+    .cherry-toolbar {
+      padding-right: calc(getCssVar('composite-form-item-ex', 'menu-width') + getCssVar('spacing', 'extra-tight'));
+    }
+
+    .#{bem(markdown-menu)} {
+      position: absolute;
+      top: 1px;
+      right: 1px;
+      z-index: getCssVar('composite-form-item-ex', 'menu-z-index');
+      display: flex;
+      align-items: center;
+      height: calc(getCssVar('markdown', 'toolbar-height') - 1px);
+      background: getCssVar('composite-form-item-ex', 'menu-bg-color');
+      border-right: 1px solid getCssVar(color, border);
+      border-left: 1px solid getCssVar(color, border);
+
+
+      @include when('fullscreen'){
+        position: fixed;
+        z-index: 1000;
+      }
+
+      .#{bem(composite-form-item-ex-menu)} {
+        position: relative;
+      }
+    }
+  }
+  
+  .cherry-preview--full {
+    border-left: none;
+  }
+
+  .cherry-flex-toc__fixed{
+    color: getCssVar(markdown, color-fixed-toc-text);
+
+    &.cherry-flex-toc__pure .cherry-toc-head{
+      color: getCssVar(markdown,color-fixed-toc-arrow-text);
+    }
+
+    &:hover{
+      z-index: 100;
+    }
+  } 
+
+  .theme__light,
+  .theme__dark {
+    color: getCssVar(form-item, text-color);
+  }
+
+  .cherry-markdown h1,
+  .cherry-markdown h2,
+  .cherry-markdown h3,
+  .cherry-markdown h4,
+  .cherry-markdown h5,
+  .cherry-markdown h6 {
+    a::before {
+      display: none;
+    }
+  }
+
+  .cherry.fullscreen{
+    z-index: 999;
+  }
+
+  // 对比代码块
+  .cherry-markdown div[data-type='codeBlock'] {
+    code.language-diff {
+      display: inline-block;
+      width: 100%;
+
+      .code-line {
+        display: inline-block;
+        width: 100%;
+        line-height: 1.3em;
+
+        > .token {
+            display: flex;
+
+          .line {
+            display: inline-block;
+          }
+
+          .line:empty {
+            display: none;
+          }
+        }
+      }
+
+      .token.inserted {
+        color: getCssVar(color, success, text);
+        background: getCssVar(color, success);
+      }
+
+      .token.deleted {
+        color: getCssVar(color, danger, text);
+        background: getCssVar(color, danger);
+      }
+    }
+  }
+
+  @include m('light'){ 
+    .theme__light,
+    .theme__green,
+    .theme__violet{
+      .cherry-toolbar{
+        background-color: getCssVar(color, bg, 0);
+      } 
+    }
+
+    .theme__dark.cherry{
+      .cherry-flex-toc{
+        color: getCssVar(markdown,color-toc-header-text);
+      }
+
+      & *::-webkit-scrollbar-thumb{
+        background: getCssVar(markdown,color-light-scrollbar-thumb-dark);
+        
+        &:hover{
+          background: getCssVar(markdown,color-scrollbar-thumb-dark-hover);
+        } 
+      }   
+    }
+  }
+
+  @include m('dark'){ 
+    &.#{bem(markdown-cherry)} {
+      .cherry {
+        border: 1px solid getCssVar(markdown, color-dark-mardown-border);
+      }
+    }
+    
+
+    .theme__green,
+    .theme__violet,
+    .theme__light{
+      .cherry-toolbar{
+        background-color: getCssVar(color, shadow);
+      } 
+    }
+
+    .theme__dark.cherry{
+      .cherry-toc-head{
+        color: getCssVar(markdown,color-dark-toc-text);
+      }
+
+      & *::-webkit-scrollbar-thumb{
+        background: getCssVar(markdown,color-dark-scrollbar-thumb-dark);
+        
+        &:hover{
+          background: getCssVar(markdown,color-scrollbar-thumb-dark-hover);
+        } 
+      } 
+    }  
+  }
+}