Wrap code now works in editor mode

Author: mugiwara85

main.js

@@ -6,8 +6,8 @@ import { EditorView, ViewPlugin } from "@codemirror/view";
 import { isPluginLoaded } from "../Utils";
 import { CodeblockCustomizerSettings } from "../Settings";
 import CodeBlockCustomizerPlugin from "../main";
-import { extractCodeBlocksFromAdmonition } from "../ReadingViewUtils";
-import { CodeBlockRenderer } from "../CodeBlockRenderer";
+import { extractCodeBlocksFromAdmonition } from "../ReadingView/ReadingViewUtils";
+import { CodeBlockRenderer } from "../ReadingView/CodeBlockRenderer";
 import { CodeBlockPositions } from "./CodeBlockPositions";
 
 export function admonitionExtension(plugin: CodeBlockCustomizerPlugin, settings: CodeblockCustomizerSettings, codeBlockPositionsField: StateField<CodeBlockPositions[]>) {

package-lock.json

@@ -9,7 +9,7 @@ import { TooltipManager } from "../TooltipManager";
 import { CodeblockCustomizerSettings } from "../Settings";
 import { ANNOTATION_PATTERN, rhombusSVG } from "../Const";
 import CodeBlockCustomizerPlugin from "../main";
-import { CodeBlockPositions } from "./CodeBlockPositions";
+import { CodeBlockPositions, getVisibleCodeBlocks } from "./CodeBlockPositions";
 
 const COMMENT_REGEX = /^\s*(?:\/\/|#|--|\/\*)\s*|\s*\*\/$/g;
 
@@ -42,10 +42,11 @@ export function annotationsExtension(plugin: CodeBlockCustomizerPlugin, settings
     buildDecorations(view: EditorView): DecorationSet {
       const decorations: Array<Range<Decoration>> = [];
       const codeBlockPositions = view.state.field(codeBlockPositionsField, false) ?? [];
+      const visibleBlocks = getVisibleCodeBlocks(codeBlockPositions, view.visibleRanges);
       const cursorPos = view.state.selection.main.head;
       const cursorLineNumber = view.state.doc.lineAt(cursorPos).number;
 
-      for (const pos of codeBlockPositions) {
+      for (const pos of visibleBlocks) {
         syntaxTree(view.state).iterate({
           from: pos.codeBlockStartPos, to: pos.codeBlockEndPos,
           enter: (node) => {

src/EditorView/Admonitions.ts

@@ -29,6 +29,7 @@ export const semiFade = StateEffect.define<Range<Decoration>>();
 export const semiUnFade = StateEffect.define<{ filterFrom: number; filterTo: number }>();
 export const unhideEffect = StateEffect.define<{ from: number; to: number }>();
 export const rehideEffect = StateEffect.define<{ from: number; to: number }>();
+export const wrapEffect = StateEffect.define<{ pos: number; unwrap: boolean }>();
 
 export type CollapseEffect = Range<Decoration>;
 export type UncollapseEffect = { filter: (from: number, to: number) => boolean; filterFrom: number; filterTo: number };

src/EditorView/Annotations.ts

@@ -17,26 +17,27 @@ import { linksExtension } from "./Links";
 import { annotationsExtension } from "./Annotations";
 import { executeCodeExtension } from "./ExecuteCodePlugin";
 import { admonitionExtension } from "./Admonitions";
-export { FoldingState, FoldCommand } from "./EditorEffects";
+import { wrapExtension } from "./Wrapping";
 
 let settingsUpdated = false;
 export function updateValue(newValue: boolean) {
   settingsUpdated = newValue;
-}
+}// updateValue
 
 let resetFoldDecorations = false;
 export function resetFoldDecos(newValue: boolean) {
   resetFoldDecorations = newValue;
-}
+}// resetFoldDecos
 
 export function extensions(plugin: CodeBlockCustomizerPlugin, settings: CodeblockCustomizerSettings) {
   const codeBlockPositionsField = createCodeBlockPositionsField(settings, () => settingsUpdated);
   const { hiddenLinesUnhiddenField, hiddenLinesField, getHiddenRanges, getHiddenLines } = hideLinesExtension(settings, codeBlockPositionsField);
+  const { wrappingField, unwrappedCodeBlocksField, scrollSyncPlugin } = wrapExtension(codeBlockPositionsField, settings);
   const {
     collapseField, foldCommandField, rememberedFoldField, defaultFoldUnfoldedField, toggleCodeBlockFold, getFoldingState, foldAll, unfoldAll, restoreDefaultFold
   } = foldingExtension(plugin, settings, codeBlockPositionsField, hiddenLinesUnhiddenField, getHiddenLines, () => groupedCodeBlocksField, () => resetFoldDecorations);
   const { groupedCodeBlocksField, activeGroupTabField, addTabs } = groupedCodeBlocksExtension(plugin, settings, codeBlockPositionsField, () => toggleCodeBlockFold);
-  const { headerField, buttonWidget, createButtonConfigs } = headerExtension(plugin, settings, codeBlockPositionsField, collapseField, activeGroupTabField, groupedCodeBlocksField, hiddenLinesUnhiddenField, getFoldingState, toggleCodeBlockFold, addTabs, () => settingsUpdated);
+  const { headerField, buttonWidget, createButtonConfigs } = headerExtension(plugin, settings, codeBlockPositionsField, collapseField, activeGroupTabField, groupedCodeBlocksField, hiddenLinesUnhiddenField, unwrappedCodeBlocksField, getFoldingState, toggleCodeBlockFold, addTabs, () => settingsUpdated, getHiddenRanges);
   const { viewPlugin, liveUpdateExtension, forceRefreshListener } = mainViewPluginExtension(plugin, settings, codeBlockPositionsField, collapseField, foldCommandField, hiddenLinesUnhiddenField, getHiddenRanges, () => updateValue, () => resetFoldDecos, () => settingsUpdated);
   const { hideFencesPlugin } = hideFenceLinesExtension(plugin, settings, codeBlockPositionsField, createButtonConfigs, buttonWidget, () => updateValue, () => resetFoldDecos, () => settingsUpdated);
   const { inlineCodeViewPlugin } = inlineCodeExtension(plugin, settings);
@@ -84,13 +85,16 @@ export function extensions(plugin: CodeBlockCustomizerPlugin, settings: Codebloc
     headerField,
     hiddenLinesUnhiddenField,
     hiddenLinesField,
+    wrappingField,
+    unwrappedCodeBlocksField,
     viewPlugin,
     linkViewPlugin,
     inlineCodeViewPlugin,
     annotationViewPlugin,
     hideFencesPlugin,
     executeCodeViewPlugin,
     admonitionViewPlugin,
+    scrollSyncPlugin,
     liveUpdateExtension(),
     forceRefreshListener,
     EditorView.domEventHandlers({

src/EditorView/EditorEffects.ts

@@ -4,7 +4,7 @@ import { EditorView, ViewPlugin } from "@codemirror/view";
 import { isPluginLoaded, getBorderColorByLanguage, getPropertyFromLanguageSpecificColors } from "../Utils";
 import { CodeblockCustomizerSettings } from "../Settings";
 import CodeBlockCustomizerPlugin from "../main";
-import { createButtons, extractLinesFromHTML, renderCodeBlockLines } from "../ReadingViewUtils";
+import { createButtons, extractLinesFromHTML, renderCodeBlockLines } from "../ReadingView/ReadingViewUtils";
 import { createExecuteCodeEditButton, verifyAndRevealExecuteButtons } from "../ExecuteCode";
 import { getAllParameters } from "../Parsing";
 import { CodeBlockPositions } from "./CodeBlockPositions";