feat(markup): allow to disable search panel (#736)

Co-authored-by: dandmechenko <[email protected]>

Author: DaniilDem

demo/components/Playground.tsx

@@ -67,6 +67,7 @@ export type PlaygroundProps = {
     sanitizeHtml?: boolean;
     prepareRawMarkup?: boolean;
     splitModeOrientation?: 'horizontal' | 'vertical' | false;
+    searchPanel?: boolean;
     stickyToolbar?: boolean;
     initialSplitModeEnabled?: boolean;
     renderPreviewDefined?: boolean;
@@ -114,6 +115,7 @@ export const Playground = memo<PlaygroundProps>((props) => {
         sanitizeHtml,
         prepareRawMarkup,
         splitModeOrientation,
+        searchPanel,
         stickyToolbar,
         renderPreviewDefined,
         height,
@@ -237,6 +239,7 @@ export const Playground = memo<PlaygroundProps>((props) => {
                 parseInsertedUrlAsImage,
                 renderPreview,
                 splitMode: splitModeOrientation,
+                searchPanel,
             },
         },
         [
@@ -245,6 +248,7 @@ export const Playground = memo<PlaygroundProps>((props) => {
             linkifyTlds,
             breaks,
             splitModeOrientation,
+            searchPanel,
             renderPreviewDefined,
             renderPreview,
             experimental?.needToSetDimensionsForUploadedImages,

demo/components/PlaygroundMini.tsx

@@ -15,6 +15,7 @@ export type PlaygroundMiniProps = Pick<
     | 'sanitizeHtml'
     | 'prepareRawMarkup'
     | 'splitModeOrientation'
+    | 'searchPanel'
     | 'stickyToolbar'
     | 'initialSplitModeEnabled'
     | 'renderPreviewDefined'

demo/defaults/args.ts

@@ -12,6 +12,7 @@ export const args: Meta<PlaygroundMiniProps>['args'] = {
     sanitizeHtml: false,
     prepareRawMarkup: false,
     splitModeOrientation: 'horizontal',
+    searchPanel: true,
     stickyToolbar: true,
     initialSplitModeEnabled: false,
     renderPreviewDefined: true,

src/bundle/Editor.ts

@@ -309,6 +309,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
                     autocompletion: this.#markupConfig.autocompletion,
                     directiveSyntax: this.directiveSyntax,
                     receiver: this,
+                    searchPanel: this.#markupConfig.searchPanel,
                 }),
             );
         }

src/bundle/types.ts

@@ -163,6 +163,11 @@ export type MarkdownEditorMarkupConfig = {
      * The function, used to determine if the pasted text is the image url and should be inserted as an image
      */
     parseInsertedUrlAsImage?: ParseInsertedUrlAsImage;
+    /**
+     * Show search panel in the editor.
+     * @default true
+     */
+    searchPanel?: boolean;
 };
 
 // do not export this type

src/markup/codemirror/create.ts

@@ -88,6 +88,7 @@ export type CreateCodemirrorParams = {
     autocompletion?: Autocompletion;
     directiveSyntax: DirectiveSyntaxContext;
     preserveEmptyRows: boolean;
+    searchPanel?: boolean;
 };
 
 export function createCodemirror(params: CreateCodemirrorParams) {
@@ -111,6 +112,7 @@ export function createCodemirror(params: CreateCodemirrorParams) {
         parseInsertedUrlAsImage,
         directiveSyntax,
         preserveEmptyRows,
+        searchPanel = true,
     } = params;
 
     const extensions: Extension[] = [gravityTheme, placeholder(placeholderContent)];
@@ -268,12 +270,17 @@ export function createCodemirror(params: CreateCodemirrorParams) {
                 }
             },
         }),
-        SearchPanelPlugin({
-            anchorSelector: '.g-md-search-anchor',
-            receiver,
-        }),
     );
 
+    if (searchPanel) {
+        extensions.push(
+            SearchPanelPlugin({
+                anchorSelector: '.g-md-search-anchor',
+                receiver,
+            }),
+        );
+    }
+
     if (preserveEmptyRows) {
         extensions.push(
             keymap.of([