Add option to enabled/disable wrapping lines in paragraphs

VolkovLabs · Nov 15, 2023 · 5f1b245 · 5f1b245
1 parent 0015994
commit 5f1b245
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 4 deletions.
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
@@ -86,8 +86,17 @@ export const Text: React.FC<Props> = ({ options, frame, timeRange, timeZone, rep
    */
   const getHtml = useCallback(
     (data: any, content: string) =>
-      generateHtml({ data, content, helpers: options.helpers, timeRange, timeZone, replaceVariables, eventBus }),
-    [eventBus, options.helpers, replaceVariables, timeRange, timeZone]
+      generateHtml({
+        data,
+        content,
+        helpers: options.helpers,
+        timeRange,
+        timeZone,
+        replaceVariables,
+        eventBus,
+        options,
+      }),
+    [eventBus, replaceVariables, timeRange, timeZone, options]
   );
 
   useEffect(() => {

diff --git a/src/constants/default.ts b/src/constants/default.ts
@@ -15,4 +15,5 @@ export const DefaultOptions: PanelOptions = {
   helpers: '',
   status: '',
   styles: '',
+  wrap: true,
 };
diff --git a/src/constants/panel.ts b/src/constants/panel.ts
@@ -16,3 +16,11 @@ export const EditorsOptions = [
   { value: EditorType.HELPERS, label: 'JavaScript Code' },
   { value: EditorType.STYLES, label: 'Styles' },
 ];
+
+/**
+ * Wrap Options
+ */
+export const WrapOptions = [
+  { value: true, label: 'Enabled' },
+  { value: false, label: 'Disabled' },
+];
diff --git a/src/helpers/html.ts b/src/helpers/html.ts
@@ -6,6 +6,7 @@ import { config, locationService } from '@grafana/runtime';
 import { TimeZone } from '@grafana/schema';
 import { registerHelpers } from './handlebars';
 import { replaceVariablesHelper } from './variable';
+import { PanelOptions } from '../types';
 
 /**
  * Helpers
@@ -23,6 +24,7 @@ export const generateHtml = ({
   timeZone,
   replaceVariables,
   eventBus,
+  options,
 }: {
   data: Record<string, any>;
   content: string;
@@ -31,6 +33,7 @@ export const generateHtml = ({
   timeZone: TimeZone;
   replaceVariables: InterpolateFunction;
   eventBus: EventBus;
+  options: PanelOptions;
 }): { html: string; unsubscribe?: unknown } => {
   /**
    * Variable
@@ -93,7 +96,7 @@ export const generateHtml = ({
   /**
    * Render Markdown
    */
-  const html = md.render(markdown);
+  const html = options.wrap ? md.render(markdown) : md.renderInline(markdown);
 
   /**
    * Skip sanitizing if disabled in Grafana

diff --git a/src/module.ts b/src/module.ts
@@ -1,7 +1,14 @@
 import { Field, FieldConfigProperty, FieldType, PanelPlugin } from '@grafana/data';
 import { config } from '@grafana/runtime';
 import { HelpersEditor, ResourcesEditor, StylesEditor, TextEditor, TextPanel } from './components';
-import { CodeLanguageOptions, DefaultOptions, EditorsOptions, EveryRowOptions, FormatOptions } from './constants';
+import {
+  CodeLanguageOptions,
+  DefaultOptions,
+  EditorsOptions,
+  EveryRowOptions,
+  FormatOptions,
+  WrapOptions,
+} from './constants';
 import { EditorType, PanelOptions } from './types';
 
 /**
@@ -110,6 +117,16 @@ export const plugin = new PanelPlugin<PanelOptions>(TextPanel)
      * Content
      */
     builder
+      .addRadio({
+        path: 'wrap',
+        name: 'Wrap automatically in paragraphs',
+        description: 'If disabled, result will NOT be wrapped into <p> tags',
+        defaultValue: DefaultOptions.wrap,
+        settings: {
+          options: WrapOptions,
+        },
+        category: ['Content'],
+      })
       .addCustomEditor({
         id: 'content',
         path: 'content',

diff --git a/src/types/panel.ts b/src/types/panel.ts
@@ -82,4 +82,11 @@ export interface PanelOptions {
    * @type {Resource[]}
    */
   externalScripts: Resource[];
+
+  /**
+   * Wrap
+   *
+   * @type {boolean}
+   */
+  wrap: boolean;
 }