text-visual-diff
    Preparing search index...

    Class DiffTextController

    Stimulus controller that renders a highlighted diff inside the element.

    Connect a <div> to this controller and provide source-html and target-text values. On connect (or when either value changes) the controller runs diffText and sets the element's innerHTML to the highlighted source HTML.

    <div data-controller="text-visual-diff"
         data-text-visual-diff-source-html-value="&lt;p&gt;Hello&lt;/p&gt;"
         data-text-visual-diff-target-text-value="Hello">
    </div>

    Optionally specify an output target to render into a nested element instead of the controller element itself.

    Hierarchy

    • Controller<HTMLElement>
      • DiffTextController
    Index

    Constructors

    constructor

    Properties

    context hasOutputTarget matchedClassValue matchedTagValue outputTarget sourceHtmlValue targetTextValue unmatchedClassValue unmatchedTagValue blessings outlets targets values

    Accessors

    application classes data element identifier outlets scope targets shouldLoad

    Methods

    connect disconnect dispatch initialize render sourceHtmlValueChanged targetTextValueChanged afterLoad

    Constructors

    • Parameters

      • context: Context

      Returns DiffTextController

    Properties

    context: Context
    hasOutputTarget: boolean
    matchedClassValue: string
    matchedTagValue: string
    outputTarget: HTMLElement
    sourceHtmlValue: string
    targetTextValue: string
    unmatchedClassValue: string
    unmatchedTagValue: string
    blessings: (<T>(constructor: Constructor<T>) => any)[]
    outlets: string[]
    targets: string[] = ...
    values: {
        matchedClass: { default: string; type: StringConstructor };
        matchedTag: { default: string; type: StringConstructor };
        sourceHtml: StringConstructor;
        targetText: StringConstructor;
        unmatchedClass: { default: string; type: StringConstructor };
        unmatchedTag: { default: string; type: StringConstructor };
    } = ...

    Type Declaration

    • matchedClass: { default: string; type: StringConstructor }

      CSS class for matched regions. Defaults to "diff-matched".

    • matchedTag: { default: string; type: StringConstructor }

      HTML tag for matched regions. Defaults to "mark".

    • sourceHtml: StringConstructor

      HTML string whose visible text is compared.

    • targetText: StringConstructor

      Plain text to compare against.

    • unmatchedClass: { default: string; type: StringConstructor }

      CSS class for unmatched regions. Defaults to "diff-unmatched".

    • unmatchedTag: { default: string; type: StringConstructor }

      HTML tag for unmatched regions. Defaults to "mark".

    Accessors

    • get application(): Application

      Returns Application

    • get classes(): ClassMap

      Returns ClassMap

    • get data(): DataMap

      Returns DataMap

    • get element(): ElementType

      Returns ElementType

    • get identifier(): string

      Returns string

    • get outlets(): OutletSet

      Returns OutletSet

    • get scope(): Scope

      Returns Scope

    • get targets(): TargetSet

      Returns TargetSet

    • get shouldLoad(): boolean

      Returns boolean

    Methods

    • Returns void

    • Parameters

      • eventName: string
      • Optional__namedParameters: Partial<
            {
                bubbles: boolean;
                cancelable: boolean;
                detail: Object;
                prefix: string;
                target: Element
                | Window
                | Document;
            },
        >

      Returns CustomEvent<Object>

    • Returns void

    • Parameters

      • _identifier: string
      • _application: Application

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods