@antv/t8/es/text.js

T8 is a text visualization solution for unstructured data within the AntV technology stack, and it is a declarative T8 markdown syntax that can be used to describe the content of data interpretation reports.

import { __extends } from 'tslib';
import { render, h } from 'preact';
import 'preact/jsx-runtime';
import 'uuid';
import './schema/paragraph.js';
import './schema/phrase.js';
import './vis-components/styled/bullet.js';
import './vis-components/styled/container.js';
import './vis-components/styled/entity.js';
import './vis-components/styled/heading.js';
import './vis-components/styled/marks.js';
import './vis-components/styled/paragraph.js';
import './vis-components/context/hooks/theme.js';
import './vis-components/context/hooks/plugin.js';
import './vis-components/context/hooks/event.js';
import './vis-components/context/hooks/currentParagraphInfo.js';
import './plugin/index.js';
import { getThemeSeedToken } from './theme/util.js';
import './theme/seed/index.js';
import 'preact/hooks';
import { NarrativeTextVis } from './vis-components/NarrativeTextVis.js';
import EE from '@antv/event-emitter';
import { parseSyntax } from './parser/syntax-parser.js';
import { PluginManager } from './plugin/PluginManager.js';
import { presetPlugins } from './plugin/presets/index.js';

/**
 * Text component for rendering narrative text visualizations.
 *
 * Usage:
 * ```javascript
 * const text = new Text('#container');
 * text.theme('light').render(`
 *   # Sales Report
 *   Total sales are [¥1,234,567](metric_value).
 * `);
 * ```
 */
var Text = /** @class */ (function (_super) {
    __extends(Text, _super);
    function Text(container) {
        var _this = _super.call(this) || this;
        _this.container = typeof container === 'string' ? document.querySelector(container) : container;
        _this.pluginManager = new PluginManager(presetPlugins);
        return _this;
    }
    /**
     * Set the theme for the narrative text visualization.
     * @param theme - The theme configuration for the text visualization.
     * @returns The Text instance for method chaining.
     */
    Text.prototype.theme = function (theme, seedToken) {
        this.themeSeedToken = getThemeSeedToken(theme, seedToken);
        return this;
    };
    /**
     * Register a plugin for the text visualization.
     * @param plugin - The plugin to register.
     * @returns The Text instance for method chaining.
     */
    Text.prototype.registerPlugin = function (plugin) {
        this.pluginManager.register(plugin);
        return this;
    };
    /**
     * Render the narrative text visualization.
     * Accepts a T8 syntax string for rendering.
     * @param t8Syntax - T8 syntax string to render.
     * @returns A function to unmount the component.
     */
    Text.prototype.render = function (t8Syntax) {
        var container = this.container;
        var spec;
        // Parse T8 syntax if provided
        if (t8Syntax) {
            try {
                // Parse T8 syntax string with error tolerance
                spec = parseSyntax(t8Syntax);
            }
            catch (error) {
                // Log error but continue with empty spec for error tolerance
                console.error("T8 Syntax parsing failed: ".concat(error instanceof Error ? error.message : String(error)));
                spec = { sections: [] };
            }
        }
        else {
            // Use stored spec if no content provided
            spec = this.spec;
        }
        // Render the component.
        // We use `preact` to code the `NarrativeTextVis` components.
        render(h(NarrativeTextVis, {
            spec: spec,
            pluginManager: this.pluginManager,
            themeSeedToken: this.themeSeedToken,
            onEvent: this.emit.bind(this),
        }), container);
        // Return unmount function.
        return function () {
            render(null, container);
        };
    };
    /**
     * Clear the visualization.
     */
    Text.prototype.clear = function () {
        this.unmount();
    };
    /**
     * Unmount the component.
     */
    Text.prototype.unmount = function () {
        render(null, this.container);
    };
    return Text;
}(EE));

export { Text };
//# sourceMappingURL=text.js.map