how to fold some text in Monaco Editor - Stack Overflow

admin管理员组

文章数量:1406949

I want to implement embedding base64 images in markdown files, the problem is that base64 data takes up a lot of space, I want to hide it, how can I do it?

I tried use deltaDecorations API,but failed.

const insertMarkdownImage = (base64: string) => {
  if (!editor.value) return
  const position = editor.value.getPosition()
  const imageId = `image_${Date.now()}`
  console.log(position)
  if (!position) return
  const mdImageText = `![${imageId}](${base64})`
  const urlStartPos = mdImageText.indexOf('(') + 1
  const insertRange = new monaco.Range(
    position.lineNumber,
    position.column,
    position.lineNumber,
    position.column
  )
  editor.value.executeEdits('image-paste', [{
    range: insertRange,
    text: `![${imageId}](${base64})`
  }])

  editor.value.deltaDecorations([], [{
    range: new monaco.Range(
      position.lineNumber,
      position.column + urlStartPos,
      position.lineNumber,
      position.column + mdImageText.length - 1
    ),
    options: {
      isWholeLine: false,
      inlineClassName: 'folded-image-base64',
      hoverMessage: { value: 'base64 data' },
      beforeContentClassName: 'image-url-collapse'
    }
  }])
}

:deep(.folded-image-base64) {
  display: none !important;
  width: 0 !important;
  position: absolute !important;
  font-size: 0;
}

:deep(.image-url-collapse) {
  position: relative;
}

:deep(.image-url-collapse::after) {
  content: "..." !important;
  opacity: 0.6;
  cursor: pointer;
  position: absolute;
  left: 0;
}

:deep(.image-url-collapse:hover::after) {
  opacity: 1;
}

enter image description here

本文标签： how to fold some text in Monaco EditorStack Overflow