cherry-markdown icon indicating copy to clipboard operation
cherry-markdown copied to clipboard

加载动画替换的问题

Open losingle opened this issue 1 year ago • 8 comments

var customMenuA = Cherry.createMenuHook('Remote ',  {
  iconName: 'remote',
  onClick: function(selection) {
    // 加载动画
      const { begin, end } = this.$getSelectionRange();
      const loaderElement = document.createElement("span");
      loaderElement.className = "spinner-border spinner-border-sm";
      const marker = this.editor.$cherry.getCodeMirror().markText(begin, end, {
          replacedWith: loaderElement.cloneNode(true),
      });
    return '';
  }
});

这个span顺利加进去了, 在codemirror中显示也没问题 但是在cherry中,只要执行完毕,动画就消失了,marker还存在

losingle avatar Sep 08 '23 01:09 losingle

image 可以通过增加这行代码(this.updateMarkdown = false;)让cherry跳过点击按钮后的后续操作,欢迎尝试~

sunsonliu avatar Sep 08 '23 05:09 sunsonliu

谢谢,但是没有达到效果 Codemirror的其他操作没发现问题, 但是mark没有生效

losingle avatar Sep 08 '23 13:09 losingle

动画3

刚试了下是没问题的(见上面动图,图片比较大,可能要稍微多等一会),我在/examples/scripts/index-demo.js里加入了下面的代码:

var customMenuA = Cherry.createMenuHook('Remote ',  {
  iconName: 'remote',
  onClick: function(selection) {
    // 加载动画
      const { begin, end } = this.$getSelectionRange();
      const loaderElement = document.createElement("span");
      loaderElement.className = "spinner-border spinner-border-sm";
      loaderElement.textContent = selection;
      const marker = this.editor.$cherry.getCodeMirror().markText(begin, end, {
          replacedWith: loaderElement.cloneNode(true),
      });
      this.updateMarkdown = false;
    return '';
  }
});

sunsonliu avatar Sep 08 '23 14:09 sunsonliu

动画3 动画3

刚试了下是没问题的(见上面动图,图片比较大,可能要稍微多等一会),我在/examples/scripts/index-demo.js里加入了下面的代码:

var customMenuA = Cherry.createMenuHook('Remote ',  {
  iconName: 'remote',
  onClick: function(selection) {
    // 加载动画
      const { begin, end } = this.$getSelectionRange();
      const loaderElement = document.createElement("span");
      loaderElement.className = "spinner-border spinner-border-sm";
      loaderElement.textContent = selection;
      const marker = this.editor.$cherry.getCodeMirror().markText(begin, end, {
          replacedWith: loaderElement.cloneNode(true),
      });
      this.updateMarkdown = false;
    return '';
  }
});

可以得到预期效果,谢谢

losingle avatar Sep 08 '23 14:09 losingle

@sunsonliu 可以考虑把 suggester-panel 用codemirror的widget来装载 这样不用折腾层级关系, 在定高的环境下,suggester-panel的用户体验就很差啦 Screenshot 2023-09-10 at 06 44 15

losingle avatar Sep 09 '23 22:09 losingle

@sunsonliu 可以考虑把 suggester-panel 用codemirror的widget来装载 这样不用折腾层级关系, 在定高的环境下,suggester-panel的用户体验就很差啦 Screenshot 2023-09-10 at 06 44 15

收到,之前没有了解过codemirror的widget,我们研究下,如果你有兴趣也欢迎给我们提pr哈~

sunsonliu avatar Sep 10 '23 04:09 sunsonliu

@sunsonliu 有没有快捷安全的方式增加分屏, 看了previewer的代码,还挺复杂, 我的场景是, 把TOC新开一个分屏来显示,再做一些扩展 我现在的实现是,简单粗暴的,新增一个div, 但是有一些兼容问题,需要改挺多地方的, 需要处理previewer的预览开关, 需要处理宽度调整 😭

<div class="cherry-previewer cherry-markdown theme__default" style="width: 30%;">TOC</div>

losingle avatar Sep 11 '23 06:09 losingle

是要做侧边栏目录展示吧,这个建议利用cherry.getToc()获取目录信息,然后在cherry外部自定义一个侧滑目录出来

sunsonliu avatar Sep 11 '23 12:09 sunsonliu

image 已实现右侧悬浮目录,可在https://tencent.github.io/cherry-markdown/examples/index.html 这里体验哈

sunsonliu avatar Feb 01 '24 07:02 sunsonliu