diff --git a/src/plugins/common/react/ReactPlainText.tsx b/src/plugins/common/react/ReactPlainText.tsx index e115c1b9..bd851427 100644 --- a/src/plugins/common/react/ReactPlainText.tsx +++ b/src/plugins/common/react/ReactPlainText.tsx @@ -51,6 +51,7 @@ const ReactPlainText = memo( onCompositionEnd, onContextMenu, onTextChange, + spellCheck, }) => { const isChat = variant === 'chat'; const { @@ -243,6 +244,7 @@ const ReactPlainText = memo( onContextMenu={handleContextMenu} onFocus={handleFocus} ref={editorContainerRef} + spellCheck={spellCheck} /> {placeholder} diff --git a/src/plugins/common/react/type.ts b/src/plugins/common/react/type.ts index cc700b97..b9157bf9 100644 --- a/src/plugins/common/react/type.ts +++ b/src/plugins/common/react/type.ts @@ -71,6 +71,12 @@ export interface ReactPlainTextProps { * @default true */ pasteVSCodeAsCodeBlock?: boolean; + /** + * Controls the spellCheck attribute on the contentEditable div. + * Setting to false also suppresses Safari/WebKit inline predictive text (Apple Intelligence). + * Consumers that don't want spellcheck (e.g. chat input) should pass spellCheck={false} explicitly. + */ + spellCheck?: boolean; style?: CSSProperties; theme?: CommonPluginOptions['theme'] & { fontSize?: number; diff --git a/src/react/Editor/demos/spellCheck.tsx b/src/react/Editor/demos/spellCheck.tsx new file mode 100644 index 00000000..df4b39d6 --- /dev/null +++ b/src/react/Editor/demos/spellCheck.tsx @@ -0,0 +1,74 @@ +import { Editor, useEditor } from '@lobehub/editor/react'; +import { createStaticStyles } from 'antd-style'; +import { type FC } from 'react'; + +const styles = createStaticStyles(({ css }) => ({ + container: css` + display: flex; + gap: 16px; + padding: 16px; + `, + editor: css` + min-height: 120px; + padding: 12px; + border: 1px solid #d9d9d9; + border-radius: 6px; + `, + label: css` + margin-bottom: 8px; + font-size: 12px; + font-weight: 500; + opacity: 0.6; + `, + wrapper: css` + flex: 1; + `, +})); + +const SpellCheckOn: FC = () => { + const editor = useEditor(); + return ( +
+
{'spellCheck={true}'} (browser default)
+ +
+ ); +}; + +const SpellCheckOff: FC = () => { + const editor = useEditor(); + return ( +
+
{'spellCheck={false}'} (recommended for chat input)
+ +
+ ); +}; + +const Demo: FC = () => { + return ( +
+ + +
+ ); +}; + +export default Demo; diff --git a/src/react/Editor/index.md b/src/react/Editor/index.md index 1f7c180b..e7bd1685 100644 --- a/src/react/Editor/index.md +++ b/src/react/Editor/index.md @@ -38,6 +38,15 @@ Force all pasted content to be inserted as plain text, stripping any rich text f + +## spellCheck — Suppress Safari Inline Predictive Text + +Setting `spellCheck={false}` on the editor disables OS-level spellcheck and suppresses +Safari/WebKit inline predictive text (Apple Intelligence). This is recommended for chat +input surfaces where the editor provides its own autocomplete. + + + ## APIs ### Editor