@nocobase/client-v2 2.2.0-alpha.3 → 2.2.0-alpha.5

package/src/flow/models/fields/TextareaFieldModel.tsx

@@ -9,56 +9,79 @@
 
 import { Input } from 'antd';
 import type { TextAreaProps } from 'antd/es/input';
-import type { TextAreaRef } from 'antd/es/input/TextArea';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { largeField, EditableItemModel } from '@nocobase/flow-engine';
 import { FieldModel } from '../base/FieldModel';
 
 function IMESafeTextArea(props: TextAreaProps) {
   const { value, onChange, onCompositionStart, onCompositionEnd, ...rest } = props;
-  const textAreaRef = useRef<TextAreaRef>(null);
-  const previousValueRef = useRef(value);
-  const defaultValue = typeof value === 'bigint' ? String(value) : value;
+  const [textAreaValue, setTextAreaValue] = useState<TextAreaProps['value']>(() => normalizeTextAreaValue(value));
+  const textAreaValueRef = useRef<TextAreaProps['value']>(textAreaValue);
+  const pendingLocalValuesRef = useRef<TextAreaProps['value'][]>([]);
 
   useEffect(() => {
-    if (Object.is(previousValueRef.current, value)) {
-      return;
-    }
-    previousValueRef.current = value;
+    const nextValue = normalizeTextAreaValue(value);
+    const pendingValues = pendingLocalValuesRef.current;
+    const pendingIndex = pendingValues.findIndex((item) => Object.is(item, nextValue));
 
-    const textArea = textAreaRef.current?.resizableTextArea?.textArea;
-    if (textArea) {
-      const nextValue = value == null ? '' : String(value);
-      if (textArea.value !== nextValue) {
-        textArea.value = nextValue;
+    if (pendingIndex >= 0) {
+      pendingValues.splice(0, pendingIndex + 1);
+      if (!Object.is(textAreaValueRef.current, nextValue)) {
+        return;
       }
     }
+
+    pendingValues.length = 0;
+    if (Object.is(textAreaValueRef.current, nextValue)) {
+      return;
+    }
+
+    textAreaValueRef.current = nextValue;
+    setTextAreaValue(nextValue);
   }, [value]);
 
   const getEventValue = (event: React.ChangeEvent<HTMLTextAreaElement> | React.CompositionEvent<HTMLTextAreaElement>) =>
     event.currentTarget.value;
 
+  const recordLocalValue = (
+    event: React.ChangeEvent<HTMLTextAreaElement> | React.CompositionEvent<HTMLTextAreaElement>,
+  ) => {
+    const nextValue = getEventValue(event);
+    const pendingValues = pendingLocalValuesRef.current;
+    pendingValues.push(nextValue);
+    if (pendingValues.length > 20) {
+      pendingValues.shift();
+    }
+    textAreaValueRef.current = nextValue;
+    setTextAreaValue(nextValue);
+  };
+
   return (
     <Input.TextArea
       {...rest}
-      ref={textAreaRef}
-      defaultValue={defaultValue}
+      value={textAreaValue}
       onChange={(event) => {
-        previousValueRef.current = getEventValue(event);
+        recordLocalValue(event);
         onChange?.(event);
       }}
       onCompositionStart={(event) => {
-        previousValueRef.current = getEventValue(event);
+        recordLocalValue(event);
         onCompositionStart?.(event);
       }}
       onCompositionEnd={(event) => {
-        previousValueRef.current = getEventValue(event);
+        recordLocalValue(event);
         onCompositionEnd?.(event);
       }}
     />
   );
 }
 
+function normalizeTextAreaValue(nextValue: unknown): TextAreaProps['value'] {
+  if (typeof nextValue === 'bigint') return String(nextValue);
+  if (nextValue == null) return '';
+  return nextValue as TextAreaProps['value'];
+}
+
 @largeField()
 export class TextareaFieldModel extends FieldModel {
   render() {

package/src/flow/models/fields/__tests__/TextareaFieldModel.test.tsx

@@ -7,8 +7,9 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { FlowEngine } from '@nocobase/flow-engine';
+import { FieldModelRenderer, FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Form } from 'antd';
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { TextareaFieldModel } from '../TextareaFieldModel';
@@ -23,6 +24,36 @@ function createTextareaFieldModel(props?: Record<string, unknown>) {
 }
 
 describe('TextareaFieldModel', () => {
+  it('syncs multiline values assigned through the form renderer', async () => {
+    const flowEngine = new FlowEngine();
+    const model = createTextareaFieldModel();
+    model.dispatchEvent = vi.fn().mockResolvedValue([]);
+
+    function FormHost() {
+      const [form] = Form.useForm();
+
+      React.useEffect(() => {
+        form.setFieldsValue({ address: 'aaaaaa\nbbbbbb' });
+      }, [form]);
+
+      return (
+        <FlowEngineProvider engine={flowEngine}>
+          <Form form={form}>
+            <Form.Item name="address">
+              <FieldModelRenderer model={model} />
+            </Form.Item>
+          </Form>
+        </FlowEngineProvider>
+      );
+    }
+
+    render(<FormHost />);
+
+    await waitFor(() => {
+      expect((screen.getByRole('textbox') as HTMLTextAreaElement).value).toBe('aaaaaa\nbbbbbb');
+    });
+  });
+
   it('keeps IME composition text visible before the parent value is committed', () => {
     const onChange = vi.fn();
     const onCompositionStart = vi.fn();

package/src/flow/models/topbar/TopbarActionModel.tsx

@@ -18,6 +18,7 @@ import { Link, useLocation } from 'react-router-dom';
 import { useACLRoleContext } from '../../../acl';
 import type { BaseApplication } from '../../../BaseApplication';
 import type { PluginSettingsPageType } from '../../../PluginSettingsManager';
+import { shouldOpenAdminRouteInNewWindow } from '../../../RouterManager';
 import { useApp } from '../../../hooks/useApp';
 import {
   filterRenderableSettings,
@@ -65,7 +66,10 @@ const topbarActionTriggerClassName = css`
   height: 100%;
 `;
 
-type TopbarSettingsAppLike = Pick<BaseApplication<any>, 'router' | 'getPublicPath'>;
+type TopbarSettingsAppLike = Pick<
+  BaseApplication<any>,
+  'name' | 'router' | 'getPublicPath' | 'getHref' | 'layoutManager'
+>;
 
 const normalizeTopbarPath = (pathname?: string) => {
   const trimmed = pathname?.trim();
@@ -103,10 +107,57 @@ const stripTopbarRouterBasePath = (pathname: string, basename?: string) => {
   return normalizedPath;
 };
 
+const getTopbarAppPath = (pathname: string) => {
+  const normalizedPath = normalizeTopbarPath(pathname);
+  const match = /^(.*?\/(?:apps|_app)\/[^/]+)(?=\/|$)/.exec(normalizedPath);
+  const appPath = match?.[1] || '';
+
+  return {
+    appPath,
+    routePath: appPath ? normalizeTopbarPath(normalizedPath.slice(appPath.length)) : normalizedPath,
+  };
+};
+
+const getTopbarContextAppPath = (app: TopbarSettingsAppLike | undefined, basename?: string) => {
+  const basenameAppPath = getTopbarAppPath(basename || '').appPath;
+  if (basenameAppPath) {
+    return basenameAppPath;
+  }
+
+  const publicPathAppPath = getTopbarAppPath(app?.getPublicPath?.() || '').appPath;
+  if (publicPathAppPath) {
+    return publicPathAppPath;
+  }
+
+  if (app?.name && app.name !== 'main' && app.getHref) {
+    return normalizeTopbarBasePath(app.getHref('/'));
+  }
+
+  return '';
+};
+
+const prependTopbarAppPath = (pathname: string, appPath: string) => {
+  const normalizedPath = normalizeTopbarPath(pathname);
+
+  if (!appPath || normalizedPath === appPath || normalizedPath.startsWith(`${appPath}/`)) {
+    return normalizedPath;
+  }
+
+  return `${appPath}${normalizedPath}`;
+};
+
 const isAdminRuntimePath = (pathname: string) => {
   return pathname === '/admin' || pathname.startsWith('/admin/');
 };
 
+const getTopbarAdminRoutePath = (app: TopbarSettingsAppLike | undefined) => {
+  try {
+    return app?.layoutManager?.getLayout?.('admin')?.routePath;
+  } catch {
+    return undefined;
+  }
+};
+
 const buildTopbarDocumentHref = (targetPath: string, basename?: string) => {
   const normalizedTarget = normalizeTopbarPath(targetPath);
   const normalizedBase = normalizeTopbarBasePath(basename);
@@ -136,9 +187,33 @@ function TopbarInternalSettingsLabel(props: { title: React.ReactNode; path?: str
   const targetPath = props.path || '/admin/settings';
   const basename = getTopbarRouterBasePath(app);
   const currentPath = stripTopbarRouterBasePath(location.pathname, basename);
+  const currentLocationAppPath = getTopbarAppPath(currentPath);
+  const currentAppPath = currentLocationAppPath.appPath || getTopbarContextAppPath(app, basename);
+  const currentRoutePath = currentLocationAppPath.appPath ? currentLocationAppPath.routePath : currentPath;
+  const targetPathInCurrentApp = prependTopbarAppPath(stripTopbarRouterBasePath(targetPath, basename), currentAppPath);
+
+  if (currentAppPath) {
+    const href = buildTopbarDocumentHref(targetPathInCurrentApp, basename);
+    const shouldOpenInNewWindow = shouldOpenAdminRouteInNewWindow({
+      currentPathname: currentPath,
+      targetPathname: targetPathInCurrentApp,
+      basePath: basename,
+      adminRoutePath: getTopbarAdminRoutePath(app),
+    });
+
+    return (
+      <a
+        href={href}
+        target={shouldOpenInNewWindow ? '_blank' : undefined}
+        rel={shouldOpenInNewWindow ? 'noopener noreferrer' : undefined}
+      >
+        {props.title}
+      </a>
+    );
+  }
 
-  if (isAdminRuntimePath(currentPath)) {
-    return <Link to={targetPath}>{props.title}</Link>;
+  if (isAdminRuntimePath(currentRoutePath)) {
+    return <Link to={targetPathInCurrentApp}>{props.title}</Link>;
   }
 
   return (

package/src/flow/routeTransientInputArgs.ts

@@ -0,0 +1,27 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export const ROUTE_TRANSIENT_INPUT_ARGS_KEY = '__nocobaseOpenViewInputArgs';
+
+export type RouteTransientInputArgsState = {
+  [ROUTE_TRANSIENT_INPUT_ARGS_KEY]?: Record<string, Record<string, unknown>>;
+  usr?: RouteTransientInputArgsState;
+};
+
+export const getRouteTransientInputArgs = (state: unknown, viewUid?: string) => {
+  if (!viewUid || !state || typeof state !== 'object') {
+    return {};
+  }
+
+  const stateValue = state as RouteTransientInputArgsState;
+  const values = (stateValue[ROUTE_TRANSIENT_INPUT_ARGS_KEY] || stateValue.usr?.[ROUTE_TRANSIENT_INPUT_ARGS_KEY])?.[
+    viewUid
+  ];
+  return values && typeof values === 'object' ? values : {};
+};

package/src/flow/utils/__tests__/dateTimeFormat.test.ts

@@ -207,6 +207,48 @@ describe('dateTimeFormat', () => {
     expect(save).toHaveBeenCalled();
   });
 
+  it('syncs ordinary table column props when date time format settings are saved', async () => {
+    const setProps = vi.fn();
+    const save = vi.fn();
+    const setParentProps = vi.fn();
+    const model = {
+      context: {
+        collectionField: {
+          type: 'datetime',
+          interface: 'datetime',
+        },
+      },
+      setProps,
+      save,
+      parent: {
+        use: 'TableColumnModel',
+        setProps: setParentProps,
+      },
+    };
+    model.parent['subModels'] = {
+      field: model,
+    };
+
+    await dateTimeFormat.beforeParamsSave(
+      { model },
+      {
+        picker: 'date',
+        dateFormat: 'YYYY-MM-DD',
+        showTime: true,
+        timeFormat: 'HH:mm:ss',
+      },
+    );
+
+    expect(setParentProps).toHaveBeenCalledWith({
+      picker: 'date',
+      dateFormat: 'YYYY-MM-DD',
+      showTime: true,
+      timeFormat: 'HH:mm:ss',
+      format: 'YYYY-MM-DD HH:mm:ss',
+    });
+    expect(save).toHaveBeenCalled();
+  });
+
   it('hides time format for association title date-only fields', () => {
     const ctx = {
       model: {

package/src/index.ts

@@ -30,6 +30,8 @@ export * from './layout-manager';
 export * from './hooks';
 export { default as languageCodes } from './locale/languageCodes';
 export * from './nocobase-buildin-plugin';
+export { getRouteRuntimeVersion } from './utils/getRouteRuntimeVersion';
+export type { RouteRuntimeVersion } from './utils/getRouteRuntimeVersion';
 export * from './collection-field-interface/CollectionFieldInterface';
 export * from './collection-field-interface/CollectionFieldInterfaceManager';
 export * from './collection-manager/field-configure';
@@ -38,7 +40,10 @@ export * from './collection-manager/filter-operators';
 export * from './collection-manager/interfaces';
 export * from './collection-manager/template-fields';
 export * from './data-source';
+export * from './entry-actions';
 export * from './flow';
+export { CodeEditorExtension } from './flow/components/code-editor/extension';
+export type { CodeEditorExtra, CodeEditorExtraRegistry, EditorRef } from './flow/components/code-editor/types';
 export {
   DEFAULT_DATA_SOURCE_KEY,
   IconPicker,
@@ -47,4 +52,5 @@ export {
   NocoBaseDesktopRouteType,
 } from './flow-compat';
 export type { NocoBaseDesktopRoute } from './flow-compat';
+export * from './utils/markdownSanitize';
 export { default as AntdAppProvider } from './theme/AntdAppProvider';

package/src/nocobase-buildin-plugin/index.tsx

@@ -15,7 +15,12 @@ import type { Application } from '../Application';
 import { getCurrentV2RedirectPath, getDefaultV2AdminRedirectPath } from '../authRedirect';
 import { AppNotFound } from '../components';
 import { PluginFlowEngine } from '../flow';
-import { ADMIN_LAYOUT_MODEL_UID, AdminLayoutMenuItemModel, AdminLayoutModel } from '../flow/admin-shell/admin-layout';
+import {
+  ADMIN_LAYOUT_MODEL_UID,
+  AdminLayoutMenuItemModel,
+  AdminLayoutModel,
+  AppSwitcherActionPanelModel,
+} from '../flow/admin-shell/admin-layout';
 import { useApp } from '../hooks/useApp';
 import { Plugin } from '../Plugin';
 import { AdminSettingsLayoutModel } from '../settings-center';
@@ -326,6 +331,7 @@ export class NocoBaseBuildInPlugin extends Plugin<any, Application> {
     this.app.flowEngine.registerModels({
       AdminLayoutModel,
       AdminLayoutMenuItemModel,
+      AppSwitcherActionPanelModel,
       AdminSettingsLayoutModel,
     });
     this.app.layoutManager.registerLayout({

package/src/utils/getRouteRuntimeVersion.ts

@@ -0,0 +1,185 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export type RouteRuntimeVersion = 'legacy' | 'modern';
+
+declare global {
+  interface Window {
+    __nocobase_modern_client_prefix__?: string;
+    __nocobase_public_path__?: string;
+  }
+}
+
+function hasModernClientPrefix() {
+  return (
+    typeof window !== 'undefined' &&
+    typeof window.__nocobase_modern_client_prefix__ === 'string' &&
+    window.__nocobase_modern_client_prefix__.trim().length > 0
+  );
+}
+
+function hasConfiguredPublicPath() {
+  return typeof window !== 'undefined' && typeof window.__nocobase_public_path__ === 'string';
+}
+
+/** Normalize any app/public-path-like input into a root-relative pathname:
+ *
+ * - `nocobase//v/` -> `/nocobase/v`
+ * - `/` -> `/`
+ */
+function normalizeRootRelativePath(value = '/') {
+  const normalized = `/${String(value || '/').trim() || '/'}`.replace(/\/{2,}/g, '/');
+  if (normalized !== '/' && normalized.endsWith('/')) {
+    return normalized.replace(/\/+$/g, '');
+  }
+  return normalized;
+}
+
+/** Public-path form always ends with `/`, so it can be compared as a base path:
+ *
+ * - `/nocobase/v` -> `/nocobase/v/`
+ * - `/` -> `/`
+ */
+function normalizePublicPath(value = '/') {
+  const normalized = normalizeRootRelativePath(value);
+  return normalized.endsWith('/') ? normalized : `${normalized}/`;
+}
+
+/** Check whether a concrete pathname is rendered under a runtime base path:
+ *
+ * - pathname `/nocobase/v/admin/workflow/workflows/1`
+ *   basePath `/nocobase/v/`
+ *   => true
+ *
+ * - pathname `/nocobase/admin/settings/workflow/workflows/1`
+ *   basePath `/nocobase/v/`
+ *   => false
+ */
+function isPathnameInsideBasePath(pathname: string, basePath: string) {
+  const normalizedPathname = normalizeRootRelativePath(pathname);
+  const normalizedBasePath = normalizePublicPath(basePath);
+  const trimmedBasePath = normalizedBasePath.replace(/\/+$/g, '') || '/';
+
+  if (trimmedBasePath === '/') {
+    return true;
+  }
+
+  return normalizedPathname === trimmedBasePath || normalizedPathname.startsWith(`${trimmedBasePath}/`);
+}
+
+function getNormalizedModernClientPrefix() {
+  if (typeof window === 'undefined') {
+    return '';
+  }
+
+  const prefix = window.__nocobase_modern_client_prefix__?.trim();
+  return prefix ? prefix.replace(/^\/+|\/+$/g, '') : '';
+}
+
+/** Derive the actual modern-client base path from injected globals.
+ *
+ * Only returns a value when `__nocobase_public_path__` itself already points to
+ * the modern client shell:
+ *
+ * - legacy shell:
+ *   `__nocobase_public_path__ = "/nocobase/"`
+ *   `__nocobase_modern_client_prefix__ = "v"`
+ *   => `""`
+ *
+ * - modern shell:
+ *   `__nocobase_public_path__ = "/nocobase/v/"`
+ *   `__nocobase_modern_client_prefix__ = "v"`
+ *   => `"/nocobase/v/"`
+ */
+function getModernClientBasePath() {
+  const normalizedPrefix = getNormalizedModernClientPrefix();
+  if (!normalizedPrefix) {
+    return '';
+  }
+
+  if (typeof window === 'undefined') {
+    return '';
+  }
+
+  const publicPath = window.__nocobase_public_path__?.trim();
+  if (publicPath && normalizePublicPath(publicPath).endsWith(`/${normalizedPrefix}/`)) {
+    return normalizePublicPath(publicPath);
+  }
+
+  return '';
+}
+
+/** True only when the current page is actually running under the resolved
+ * modern-client base path.
+ *
+ * Example:
+ * - pathname `/v/admin/workflow/workflows/1`, modern base `/v/` => true
+ * - pathname `/admin/settings/workflow/workflows/1`, modern base `/v/` => false
+ */
+function isPathnameInModernClientRuntime() {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  const pathname = window.location?.pathname ?? '';
+  const modernClientBasePath = getModernClientBasePath();
+  if (!pathname || !modernClientBasePath) {
+    return false;
+  }
+
+  return isPathnameInsideBasePath(pathname, modernClientBasePath);
+}
+
+/** Fallback for incomplete/mocked environments where public path was not
+ * injected but the modern prefix still exists.
+ *
+ * Example:
+ * - pathname `/v/admin/workflow/workflows/1`
+ *   `__nocobase_modern_client_prefix__ = "v"`
+ *   `__nocobase_public_path__` missing
+ *   => true
+ */
+function isPathnameInModernClientRuntimeByPrefix() {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  const normalizedPrefix = getNormalizedModernClientPrefix();
+  const pathname = window.location?.pathname ?? '';
+  if (!normalizedPrefix || !pathname) {
+    return false;
+  }
+
+  return isPathnameInsideBasePath(pathname, normalizePublicPath(normalizedPrefix));
+}
+
+/** Resolve which client shell currently owns the route.
+ *
+ * - returns `modern` when the current page is actually mounted under the modern
+ *   client base path (`/v/`, `/nocobase/v/`, ...)
+ * - returns `legacy` when the route is still under the legacy shell, even if the
+ *   modern prefix global has been injected into the page
+ */
+export function getRouteRuntimeVersion(): RouteRuntimeVersion {
+  if (typeof window === 'undefined') {
+    return hasModernClientPrefix() ? 'modern' : 'legacy';
+  }
+
+  if (hasConfiguredPublicPath()) {
+    return isPathnameInModernClientRuntime() ? 'modern' : 'legacy';
+  }
+
+  // Defensive fallback for incomplete test/mocked environments where public
+  // path was not injected but the modern prefix still exists.
+  if (isPathnameInModernClientRuntimeByPrefix()) {
+    return 'modern';
+  }
+
+  return 'legacy';
+}

package/src/utils/index.tsx

@@ -11,6 +11,7 @@ import React, { ComponentType, FC } from 'react';
 import { BlankComponent } from '../components';
 
 export * from './appVersionHTML';
+export * from './getRouteRuntimeVersion';
 
 export function normalizeContainer(container: Element | ShadowRoot | string): Element | null {
   if (!container) {

package/src/utils/markdownSanitize.ts

@@ -0,0 +1,88 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export function stripMarkdownIframeTags(markdown: string) {
+  if (!markdown) {
+    return markdown;
+  }
+
+  let result = '';
+  let cursor = 0;
+
+  while (cursor < markdown.length) {
+    const iframeStart = markdown.slice(cursor).search(/<iframe\b/i);
+    if (iframeStart === -1) {
+      result += markdown.slice(cursor);
+      break;
+    }
+
+    const start = cursor + iframeStart;
+    result += markdown.slice(cursor, start);
+
+    const openingEnd = findTagEnd(markdown, start);
+    if (openingEnd === -1) {
+      break;
+    }
+
+    const openingTag = markdown.slice(start, openingEnd + 1);
+    if (/\/\s*>$/.test(openingTag)) {
+      cursor = openingEnd + 1;
+      continue;
+    }
+
+    const closingStart = markdown.slice(openingEnd + 1).search(/<\/iframe\s*>/i);
+    if (closingStart === -1) {
+      break;
+    }
+
+    cursor =
+      openingEnd + 1 + closingStart + markdown.slice(openingEnd + 1 + closingStart).match(/^<\/iframe\s*>/i)[0].length;
+  }
+
+  return result;
+}
+
+export function stripMarkdownIframes(html: string) {
+  if (!html || typeof DOMParser === 'undefined') {
+    return html;
+  }
+
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+  doc.querySelectorAll('iframe').forEach((iframe) => iframe.remove());
+  return doc.body.innerHTML;
+}
+
+export function removeMarkdownIframes(container?: ParentNode | null) {
+  container?.querySelectorAll('iframe').forEach((iframe) => iframe.remove());
+}
+
+function findTagEnd(html: string, start: number) {
+  let quote: string | undefined;
+
+  for (let index = start; index < html.length; index += 1) {
+    const char = html[index];
+    if (quote) {
+      if (char === quote) {
+        quote = undefined;
+      }
+      continue;
+    }
+
+    if (char === '"' || char === "'") {
+      quote = char;
+      continue;
+    }
+
+    if (char === '>') {
+      return index;
+    }
+  }
+
+  return -1;
+}