@chayns-components/code-highlighter 5.5.26 → 5.5.28

package/AGENTS.md

@@ -264,6 +264,22 @@ import { CodeHighlighter } from '@chayns-components/code-highlighter';
 />
 ```
 
+#### With Insert Action
+
+```tsx
+<CodeHighlighter
+    copyButtonText={'Code kopieren'}
+    shouldShowLineNumbers
+    language={'typescript'}
+    code={`const greeting = 'Hello world';
+    
+    console.log(greeting);`}
+    onInsertCode={(code) => {
+            console.log('Insert code', code);
+        }}
+/>
+```
+
 #### Light
 
 ```tsx
@@ -314,17 +330,319 @@ import { CodeHighlighter } from '@chayns-components/code-highlighter';
 
 ### Props
 
-No prop documentation available.
+| name | type | required | description |
+| --- | --- | --- | --- |
+| `code` | `string` | yes | The code that should be displayed. |
+| `copyButtonText` | `string \| undefined` | no | The text that should be displayed after the copy button.<br />If not set, just the button is displayed without text. |
+| `highlightedLines` | `HighlightedLines \| undefined` | no | The lines of code that should be highlighted.<br />Following lines can be highlighted: added, removed and just marked. |
+| `language` | `CodeHighlighterLanguage` | yes | The language of the displayed code. |
+| `onFormatError` | `((error: unknown) => void) \| undefined` | no | Function to be executed when the formatting of the code fails. |
+| `onInsertCode` | `((code: string) => void) \| undefined` | no | Function to be executed when the code should be inserted into another target. |
+| `shouldFormatCode` | `boolean \| undefined` | no | Whether the code should be formatted with prettier. |
+| `shouldShowLineNumbers` | `boolean \| undefined` | no | Whether the line numbers should be displayed. |
+| `shouldWrapLines` | `boolean \| undefined` | no | Whether long lines should be wrapped. |
+| `theme` | `CodeHighlighterTheme \| undefined` | no | The theme of the code block. Decide between dark and light. |
 
 ### Types
 
-No additional exported types documented.
+- `CodeHighlighterLanguage` -> `type CodeHighlighterLanguage =
+    | 'abap'
+    | 'abnf'
+    | 'actionscript'
+    | 'ada'
+    | 'agda'
+    | 'al'
+    | 'antlr4'
+    | 'apacheconf'
+    | 'apex'
+    | 'apl'
+    | 'applescript'
+    | 'aql'
+    | 'arduino'
+    | 'arff'
+    | 'asciidoc'
+    | 'asm6502'
+    | 'asmatmel'
+    | 'aspnet'
+    | 'autohotkey'
+    | 'autoit'
+    | 'avisynth'
+    | 'avroIdl'
+    | 'bash'
+    | 'basic'
+    | 'batch'
+    | 'bbcode'
+    | 'bicep'
+    | 'birb'
+    | 'bison'
+    | 'bnf'
+    | 'brainfuck'
+    | 'brightscript'
+    | 'bro'
+    | 'bsl'
+    | 'c'
+    | 'cfscript'
+    | 'chaiscript'
+    | 'cil'
+    | 'clike'
+    | 'clojure'
+    | 'cmake'
+    | 'cobol'
+    | 'coffeescript'
+    | 'concurnas'
+    | 'coq'
+    | 'cpp'
+    | 'crystal'
+    | 'csharp'
+    | 'cshtml'
+    | 'csp'
+    | 'cssExtras'
+    | 'css'
+    | 'csv'
+    | 'cypher'
+    | 'd'
+    | 'dart'
+    | 'dataweave'
+    | 'dax'
+    | 'dhall'
+    | 'diff'
+    | 'django'
+    | 'dnsZoneFile'
+    | 'docker'
+    | 'dot'
+    | 'ebnf'
+    | 'editorconfig'
+    | 'eiffel'
+    | 'ejs'
+    | 'elixir'
+    | 'elm'
+    | 'erb'
+    | 'erlang'
+    | 'etlua'
+    | 'excelFormula'
+    | 'factor'
+    | 'falselang'
+    | 'firestoreSecurityRules'
+    | 'flow'
+    | 'fortran'
+    | 'fsharp'
+    | 'ftl'
+    | 'gap'
+    | 'gcode'
+    | 'gdscript'
+    | 'gedcom'
+    | 'gherkin'
+    | 'git'
+    | 'glsl'
+    | 'gml'
+    | 'gn'
+    | 'goModule'
+    | 'go'
+    | 'graphql'
+    | 'groovy'
+    | 'haml'
+    | 'handlebars'
+    | 'haskell'
+    | 'haxe'
+    | 'hcl'
+    | 'hlsl'
+    | 'hoon'
+    | 'hpkp'
+    | 'hsts'
+    | 'html'
+    | 'http'
+    | 'ichigojam'
+    | 'icon'
+    | 'icuMessageFormat'
+    | 'idris'
+    | 'iecst'
+    | 'ignore'
+    | 'inform7'
+    | 'ini'
+    | 'io'
+    | 'j'
+    | 'java'
+    | 'javadoc'
+    | 'javadoclike'
+    | 'javascript'
+    | 'javastacktrace'
+    | 'jexl'
+    | 'jolie'
+    | 'jq'
+    | 'jsExtras'
+    | 'jsTemplates'
+    | 'jsdoc'
+    | 'json'
+    | 'json5'
+    | 'jsonp'
+    | 'jsstacktrace'
+    | 'jsx'
+    | 'julia'
+    | 'keepalived'
+    | 'keyman'
+    | 'kotlin'
+    | 'kumir'
+    | 'kusto'
+    | 'latex'
+    | 'latte'
+    | 'less'
+    | 'lilypond'
+    | 'liquid'
+    | 'lisp'
+    | 'livescript'
+    | 'llvm'
+    | 'log'
+    | 'lolcode'
+    | 'lua'
+    | 'magma'
+    | 'makefile'
+    | 'markdown'
+    | 'markupTemplating'
+    | 'markup'
+    | 'matlab'
+    | 'maxscript'
+    | 'mel'
+    | 'mermaid'
+    | 'mizar'
+    | 'mongodb'
+    | 'monkey'
+    | 'moonscript'
+    | 'n1ql'
+    | 'n4js'
+    | 'nand2tetrisHdl'
+    | 'naniscript'
+    | 'nasm'
+    | 'neon'
+    | 'nevod'
+    | 'nginx'
+    | 'nim'
+    | 'nix'
+    | 'nsis'
+    | 'objectivec'
+    | 'ocaml'
+    | 'opencl'
+    | 'openqasm'
+    | 'oz'
+    | 'parigp'
+    | 'parser'
+    | 'pascal'
+    | 'pascaligo'
+    | 'pcaxis'
+    | 'peoplecode'
+    | 'perl'
+    | 'phpExtras'
+    | 'php'
+    | 'phpdoc'
+    | 'plsql'
+    | 'powerquery'
+    | 'powershell'
+    | 'processing'
+    | 'prolog'
+    | 'promql'
+    | 'properties'
+    | 'protobuf'
+    | 'psl'
+    | 'pug'
+    | 'puppet'
+    | 'pure'
+    | 'purebasic'
+    | 'purescript'
+    | 'python'
+    | 'q'
+    | 'qml'
+    | 'qore'
+    | 'qsharp'
+    | 'r'
+    | 'racket'
+    | 'reason'
+    | 'regex'
+    | 'rego'
+    | 'renpy'
+    | 'rest'
+    | 'rip'
+    | 'roboconf'
+    | 'robotframework'
+    | 'ruby'
+    | 'rust'
+    | 'sas'
+    | 'sass'
+    | 'scala'
+    | 'scheme'
+    | 'scss'
+    | 'shellSession'
+    | 'smali'
+    | 'smalltalk'
+    | 'smarty'
+    | 'sml'
+    | 'solidity'
+    | 'solutionFile'
+    | 'soy'
+    | 'sparql'
+    | 'splunkSpl'
+    | 'sqf'
+    | 'sql'
+    | 'squirrel'
+    | 'stan'
+    | 'stylus'
+    | 'swift'
+    | 'systemd'
+    | 't4Cs'
+    | 't4Templating'
+    | 't4Vb'
+    | 'tap'
+    | 'tcl'
+    | 'textile'
+    | 'toml'
+    | 'tremor'
+    | 'tsx'
+    | 'tt2'
+    | 'turtle'
+    | 'twig'
+    | 'typescript'
+    | 'typoscript'
+    | 'unrealscript'
+    | 'uorazor'
+    | 'uri'
+    | 'v'
+    | 'vala'
+    | 'vbnet'
+    | 'velocity'
+    | 'verilog'
+    | 'vhdl'
+    | 'vim'
+    | 'visualBasic'
+    | 'warpscript'
+    | 'wasm'
+    | 'webIdl'
+    | 'wiki'
+    | 'wolfram'
+    | 'wren'
+    | 'xeora'
+    | 'xmlDoc'
+    | 'xojo'
+    | 'xquery'
+    | 'yaml'
+    | 'yang'
+    | 'zig'
+    | ''
+    | undefined;`
+- `CodeHighlighterTheme` -> `enum CodeHighlighterTheme {
+    Light = 'light',
+    Dark = 'dark',
+}`
+- `HighlightedLines` -> `interface HighlightedLines {
+    added?: number[];
+    removed?: number[];
+    marked?: number[];
+}`
 
 ### Usage Notes
 
 - Import `CodeHighlighter` directly from `@chayns-components/code-highlighter` instead of internal source paths.
 - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
+- Pay special attention to required props: `code`, `language`.
 
 ### Anti Patterns
 
 - Avoid imports from internal paths such as `@chayns-components/code-highlighter/src/...`; always use the public package export.
+- Avoid incomplete prop objects; follow the documented prop types and required fields.

package/lib/cjs/components/code-highlighter/CodeHighlighter.js

@@ -32,6 +32,7 @@ const CodeHighlighter = ({
   highlightedLines,
   shouldFormatCode = false,
   onFormatError,
+  onInsertCode,
   shouldShowLineNumbers = false,
   shouldWrapLines
 }) => {
@@ -146,6 +147,7 @@ const CodeHighlighter = ({
     text: code,
     theme: resolvedTheme,
     copyButtonText: copyButtonText,
+    onInsertCode: onInsertCode,
     rootRef: ref
   }), /*#__PURE__*/_react.default.createElement(_reactSyntaxHighlighter.Prism, {
     customStyle: syntaxHighlighterStyle,
@@ -156,7 +158,7 @@ const CodeHighlighter = ({
     wrapLines: true,
     wrapLongLines: shouldWrapLines,
     lineProps: lineWrapper
-  }, formattedCode)), [shouldWrapLines, resolvedTheme, language, code, copyButtonText, lineNumberStyle, syntaxHighlighterStyle, shouldShowLineNumbers, lineWrapper, formattedCode]);
+  }, formattedCode)), [shouldWrapLines, resolvedTheme, language, code, copyButtonText, onInsertCode, lineNumberStyle, syntaxHighlighterStyle, shouldShowLineNumbers, lineWrapper, formattedCode]);
 };
 CodeHighlighter.displayName = 'CodeHighlighter';
 var _default = exports.default = CodeHighlighter;

package/lib/cjs/components/code-highlighter/CodeHighlighter.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeHighlighter.js","names":["_standalone","require","_react","_interopRequireWildcard","_reactSyntaxHighlighter","_prism","_core","_codeHighlighter","_codeHighlighter2","_CodeHighlighter","_CopyToClipboard","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","addScrollbarClassToPre","root","className","preElement","querySelector","classList","add","CodeHighlighter","theme","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","shouldWrapLines","colorScheme","useColorScheme","width","setWidth","useState","formattedCode","setFormattedCode","ref","useRef","resolvedTheme","colorMode","CodeHighlighterTheme","Dark","Light","useEffect","current","handleResize","children","Array","from","find","tagName","toLowerCase","scrollWidth","window","addEventListener","removeEventListener","lineWrapper","useCallback","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","lineNumberStyle","useMemo","WebkitUserSelect","syntaxHighlighterStyle","padding","isCurrent","getParserForLanguage","then","config","format","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","StyledCodeHighlighter","$shouldWrapLines","$codeTheme","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","formatLanguage","text","rootRef","Prism","customStyle","showLineNumbers","oneDark","oneLight","wrapLines","wrapLongLines","lineProps","displayName","_default","exports"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport { useColorScheme } from '@chayns-components/core';\nimport {\n    CodeHighlighterLanguage,\n    CodeHighlighterTheme,\n    HighlightedLines,\n} from '../../types/codeHighlighter';\nimport { formatLanguage, getParserForLanguage } from '../../utils/codeHighlighter';\nimport {\n    StyledCodeHighlighter,\n    StyledCodeHighlighterFileName,\n    StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\ntype AddScrollbarClassOptions = {\n    root: HTMLDivElement | null;\n    className: string;\n};\n\nconst addScrollbarClassToPre = ({ root, className }: AddScrollbarClassOptions) => {\n    if (!root) return;\n\n    const preElement = root.querySelector('pre');\n    if (!preElement) return;\n\n    preElement.classList.add(className);\n};\n\nexport type CodeHighlighterProps = {\n    /**\n     * The code that should be displayed.\n     */\n    code: string;\n    /**\n     * The text that should be displayed after the copy button.\n     * If not set, just the button is displayed without text.\n     */\n    copyButtonText?: string;\n    /**\n     * The lines of code that should be highlighted.\n     * Following lines can be highlighted: added, removed and just marked.\n     */\n    highlightedLines?: HighlightedLines;\n    /**\n     * The language of the displayed code.\n     */\n    language: CodeHighlighterLanguage;\n    /**\n     * Function to be executed when the formatting of the code fails.\n     */\n    onFormatError?: (error: unknown) => void;\n    /**\n     * Whether the code should be formatted with prettier.\n     */\n    shouldFormatCode?: boolean;\n    /**\n     * Whether the line numbers should be displayed.\n     */\n    shouldShowLineNumbers?: boolean;\n    /**\n     * Whether long lines should be wrapped.\n     */\n    shouldWrapLines?: boolean;\n    /**\n     * The theme of the code block. Decide between dark and light.\n     */\n    theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n    theme,\n    code,\n    copyButtonText,\n    language,\n    highlightedLines,\n    shouldFormatCode = false,\n    onFormatError,\n    shouldShowLineNumbers = false,\n    shouldWrapLines,\n}) => {\n    const colorScheme = useColorScheme();\n\n    const [width, setWidth] = useState(0);\n    const [formattedCode, setFormattedCode] = useState(code);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const resolvedTheme =\n        theme ??\n        (colorScheme?.theme.colorMode === 'dark'\n            ? CodeHighlighterTheme.Dark\n            : CodeHighlighterTheme.Light);\n\n    useEffect(() => {\n        addScrollbarClassToPre({ root: ref.current, className: 'chayns-scrollbar' });\n    }, []);\n\n    useEffect(() => {\n        const handleResize = () => {\n            if (ref.current) {\n                const { children } = ref.current;\n\n                const preElement = Array.from(children).find(\n                    ({ tagName }) => tagName.toLowerCase() === 'pre',\n                );\n\n                if (preElement) {\n                    setWidth(preElement.scrollWidth);\n                }\n            }\n        };\n\n        handleResize();\n\n        window.addEventListener('resize', handleResize);\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, []);\n\n    // function to style highlighted code\n    const lineWrapper = useCallback(\n        (lineNumber: number) => {\n            let style = {\n                backgroundColor: 'none',\n                display: 'block',\n                borderRadius: '2px',\n                width: width - 15,\n            };\n\n            if (highlightedLines?.added && highlightedLines.added.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#2EF29930' };\n            } else if (highlightedLines?.removed && highlightedLines.removed.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#F22E5B30' };\n            } else if (highlightedLines?.marked && highlightedLines.marked.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#cccccc40' };\n            }\n\n            return { style };\n        },\n        [highlightedLines, width],\n    );\n\n    const lineNumberStyle = useMemo(\n        () => ({\n            WebkitUserSelect: 'none' as const,\n        }),\n        [],\n    );\n\n    const syntaxHighlighterStyle = useMemo(\n        () => ({\n            padding: '0 15px 15px',\n        }),\n        [],\n    );\n\n    useEffect(() => {\n        let isCurrent = true;\n\n        if (!shouldFormatCode) {\n            setFormattedCode(code);\n\n            return () => {\n                isCurrent = false;\n            };\n        }\n\n        void getParserForLanguage(language).then((config) => {\n            if (!config || !isCurrent) {\n                return;\n            }\n\n            try {\n                setFormattedCode(format(code, config) as unknown as string);\n            } catch (error) {\n                onFormatError?.(error);\n                setFormattedCode(code);\n            }\n        });\n\n        return () => {\n            isCurrent = false;\n        };\n    }, [code, language, onFormatError, shouldFormatCode]);\n\n    useEffect(() => {\n        const elements = document.getElementsByClassName('linenumber');\n\n        Array.from(elements).forEach((element) => {\n            const wrapper = document.createElement('tw-ignore');\n\n            while (element.firstChild) {\n                wrapper.appendChild(element.firstChild);\n            }\n\n            element.appendChild(wrapper);\n        });\n    }, []);\n\n    return useMemo(\n        () => (\n            <StyledCodeHighlighter\n                $shouldWrapLines={shouldWrapLines}\n                $codeTheme={resolvedTheme}\n                ref={ref}\n            >\n                <StyledCodeHighlighterHeader $codeTheme={resolvedTheme}>\n                    <StyledCodeHighlighterFileName $codeTheme={resolvedTheme}>\n                        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n                        {/* @ts-ignore */}\n                        <tw-ignore>{formatLanguage(language)}</tw-ignore>\n                    </StyledCodeHighlighterFileName>\n                </StyledCodeHighlighterHeader>\n                <CopyToClipboard\n                    text={code}\n                    theme={resolvedTheme}\n                    copyButtonText={copyButtonText}\n                    rootRef={ref}\n                />\n                <SyntaxHighlighter\n                    customStyle={syntaxHighlighterStyle}\n                    language={language ?? ''}\n                    lineNumberStyle={lineNumberStyle}\n                    showLineNumbers={shouldShowLineNumbers}\n                    style={resolvedTheme === CodeHighlighterTheme.Dark ? oneDark : oneLight}\n                    wrapLines\n                    wrapLongLines={shouldWrapLines}\n                    lineProps={lineWrapper}\n                >\n                    {formattedCode}\n                </SyntaxHighlighter>\n            </StyledCodeHighlighter>\n        ),\n        [\n            shouldWrapLines,\n            resolvedTheme,\n            language,\n            code,\n            copyButtonText,\n            lineNumberStyle,\n            syntaxHighlighterStyle,\n            shouldShowLineNumbers,\n            lineWrapper,\n            formattedCode,\n        ],\n    );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CodeHighlighter.js","names":["_standalone","require","_react","_interopRequireWildcard","_reactSyntaxHighlighter","_prism","_core","_codeHighlighter","_codeHighlighter2","_CodeHighlighter","_CopyToClipboard","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","addScrollbarClassToPre","root","className","preElement","querySelector","classList","add","CodeHighlighter","theme","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","onInsertCode","shouldShowLineNumbers","shouldWrapLines","colorScheme","useColorScheme","width","setWidth","useState","formattedCode","setFormattedCode","ref","useRef","resolvedTheme","colorMode","CodeHighlighterTheme","Dark","Light","useEffect","current","handleResize","children","Array","from","find","tagName","toLowerCase","scrollWidth","window","addEventListener","removeEventListener","lineWrapper","useCallback","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","lineNumberStyle","useMemo","WebkitUserSelect","syntaxHighlighterStyle","padding","isCurrent","getParserForLanguage","then","config","format","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","StyledCodeHighlighter","$shouldWrapLines","$codeTheme","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","formatLanguage","text","rootRef","Prism","customStyle","showLineNumbers","oneDark","oneLight","wrapLines","wrapLongLines","lineProps","displayName","_default","exports"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport { useColorScheme } from '@chayns-components/core';\nimport {\n    CodeHighlighterLanguage,\n    CodeHighlighterTheme,\n    HighlightedLines,\n} from '../../types/codeHighlighter';\nimport { formatLanguage, getParserForLanguage } from '../../utils/codeHighlighter';\nimport {\n    StyledCodeHighlighter,\n    StyledCodeHighlighterFileName,\n    StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\ntype AddScrollbarClassOptions = {\n    root: HTMLDivElement | null;\n    className: string;\n};\n\nconst addScrollbarClassToPre = ({ root, className }: AddScrollbarClassOptions) => {\n    if (!root) return;\n\n    const preElement = root.querySelector('pre');\n    if (!preElement) return;\n\n    preElement.classList.add(className);\n};\n\nexport type CodeHighlighterProps = {\n    /**\n     * The code that should be displayed.\n     */\n    code: string;\n    /**\n     * The text that should be displayed after the copy button.\n     * If not set, just the button is displayed without text.\n     */\n    copyButtonText?: string;\n    /**\n     * The lines of code that should be highlighted.\n     * Following lines can be highlighted: added, removed and just marked.\n     */\n    highlightedLines?: HighlightedLines;\n    /**\n     * The language of the displayed code.\n     */\n    language: CodeHighlighterLanguage;\n    /**\n     * Function to be executed when the formatting of the code fails.\n     */\n    onFormatError?: (error: unknown) => void;\n    /**\n     * Function to be executed when the code should be inserted into another target.\n     */\n    onInsertCode?: (code: string) => void;\n    /**\n     * Whether the code should be formatted with prettier.\n     */\n    shouldFormatCode?: boolean;\n    /**\n     * Whether the line numbers should be displayed.\n     */\n    shouldShowLineNumbers?: boolean;\n    /**\n     * Whether long lines should be wrapped.\n     */\n    shouldWrapLines?: boolean;\n    /**\n     * The theme of the code block. Decide between dark and light.\n     */\n    theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n    theme,\n    code,\n    copyButtonText,\n    language,\n    highlightedLines,\n    shouldFormatCode = false,\n    onFormatError,\n    onInsertCode,\n    shouldShowLineNumbers = false,\n    shouldWrapLines,\n}) => {\n    const colorScheme = useColorScheme();\n\n    const [width, setWidth] = useState(0);\n    const [formattedCode, setFormattedCode] = useState(code);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const resolvedTheme =\n        theme ??\n        (colorScheme?.theme.colorMode === 'dark'\n            ? CodeHighlighterTheme.Dark\n            : CodeHighlighterTheme.Light);\n\n    useEffect(() => {\n        addScrollbarClassToPre({ root: ref.current, className: 'chayns-scrollbar' });\n    }, []);\n\n    useEffect(() => {\n        const handleResize = () => {\n            if (ref.current) {\n                const { children } = ref.current;\n\n                const preElement = Array.from(children).find(\n                    ({ tagName }) => tagName.toLowerCase() === 'pre',\n                );\n\n                if (preElement) {\n                    setWidth(preElement.scrollWidth);\n                }\n            }\n        };\n\n        handleResize();\n\n        window.addEventListener('resize', handleResize);\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, []);\n\n    // function to style highlighted code\n    const lineWrapper = useCallback(\n        (lineNumber: number) => {\n            let style = {\n                backgroundColor: 'none',\n                display: 'block',\n                borderRadius: '2px',\n                width: width - 15,\n            };\n\n            if (highlightedLines?.added && highlightedLines.added.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#2EF29930' };\n            } else if (highlightedLines?.removed && highlightedLines.removed.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#F22E5B30' };\n            } else if (highlightedLines?.marked && highlightedLines.marked.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#cccccc40' };\n            }\n\n            return { style };\n        },\n        [highlightedLines, width],\n    );\n\n    const lineNumberStyle = useMemo(\n        () => ({\n            WebkitUserSelect: 'none' as const,\n        }),\n        [],\n    );\n\n    const syntaxHighlighterStyle = useMemo(\n        () => ({\n            padding: '0 15px 15px',\n        }),\n        [],\n    );\n\n    useEffect(() => {\n        let isCurrent = true;\n\n        if (!shouldFormatCode) {\n            setFormattedCode(code);\n\n            return () => {\n                isCurrent = false;\n            };\n        }\n\n        void getParserForLanguage(language).then((config) => {\n            if (!config || !isCurrent) {\n                return;\n            }\n\n            try {\n                setFormattedCode(format(code, config) as unknown as string);\n            } catch (error) {\n                onFormatError?.(error);\n                setFormattedCode(code);\n            }\n        });\n\n        return () => {\n            isCurrent = false;\n        };\n    }, [code, language, onFormatError, shouldFormatCode]);\n\n    useEffect(() => {\n        const elements = document.getElementsByClassName('linenumber');\n\n        Array.from(elements).forEach((element) => {\n            const wrapper = document.createElement('tw-ignore');\n\n            while (element.firstChild) {\n                wrapper.appendChild(element.firstChild);\n            }\n\n            element.appendChild(wrapper);\n        });\n    }, []);\n\n    return useMemo(\n        () => (\n            <StyledCodeHighlighter\n                $shouldWrapLines={shouldWrapLines}\n                $codeTheme={resolvedTheme}\n                ref={ref}\n            >\n                <StyledCodeHighlighterHeader $codeTheme={resolvedTheme}>\n                    <StyledCodeHighlighterFileName $codeTheme={resolvedTheme}>\n                        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n                        {/* @ts-ignore */}\n                        <tw-ignore>{formatLanguage(language)}</tw-ignore>\n                    </StyledCodeHighlighterFileName>\n                </StyledCodeHighlighterHeader>\n                <CopyToClipboard\n                    text={code}\n                    theme={resolvedTheme}\n                    copyButtonText={copyButtonText}\n                    onInsertCode={onInsertCode}\n                    rootRef={ref}\n                />\n                <SyntaxHighlighter\n                    customStyle={syntaxHighlighterStyle}\n                    language={language ?? ''}\n                    lineNumberStyle={lineNumberStyle}\n                    showLineNumbers={shouldShowLineNumbers}\n                    style={resolvedTheme === CodeHighlighterTheme.Dark ? oneDark : oneLight}\n                    wrapLines\n                    wrapLongLines={shouldWrapLines}\n                    lineProps={lineWrapper}\n                >\n                    {formattedCode}\n                </SyntaxHighlighter>\n            </StyledCodeHighlighter>\n        ),\n        [\n            shouldWrapLines,\n            resolvedTheme,\n            language,\n            code,\n            copyButtonText,\n            onInsertCode,\n            lineNumberStyle,\n            syntaxHighlighterStyle,\n            shouldShowLineNumbers,\n            lineWrapper,\n            formattedCode,\n        ],\n    );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/code-highlighter/CodeHighlighter.test.js

@@ -71,6 +71,19 @@ _vitest.vi.mock('chayns-api', () => ({
     (0, _vitest.expect)(container.querySelector('[data-copy-action="false"]')).toBeInTheDocument();
     (0, _vitest.expect)(container.querySelector('[data-calling-code-action="false"]')).toBeInTheDocument();
   });
+  (0, _vitest.it)('renders an insert action when onInsertCode is provided', () => {
+    const onInsertCode = _vitest.vi.fn();
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_CodeHighlighter.default, {
+      code: "const value = true;",
+      language: "typescript",
+      onInsertCode: onInsertCode,
+      theme: _codeHighlighter.CodeHighlighterTheme.Dark
+    }));
+    _react.fireEvent.click(_react.screen.getByRole('button', {
+      name: 'Code einfügen'
+    }));
+    (0, _vitest.expect)(onInsertCode).toHaveBeenCalledWith('const value = true;');
+  });
   (0, _vitest.it)('formats code before highlighting when requested', async () => {
     const {
       container

package/lib/cjs/components/code-highlighter/CodeHighlighter.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeHighlighter.test.js","names":["_react","require","_react2","_interopRequireDefault","_vitest","_codeHighlighter","_CodeHighlighter","e","__esModule","default","vi","mock","Icon","icons","createElement","join","SharingContextMenu","children","shouldShowCallingCodeAction","shouldShowCopyAction","useColorScheme","undefined","ttsToITextString","value","useTextstringValue","textstring","fallback","DialogType","TOAST","ToastType","ERROR","SUCCESS","createDialog","fn","open","describe","it","writeText","spyOn","navigator","clipboard","mockResolvedValue","container","render","code","copyButtonText","language","shouldShowLineNumbers","theme","CodeHighlighterTheme","Dark","fireEvent","click","screen","getByRole","name","waitFor","expect","toHaveBeenCalledWith","querySelector","toBeInTheDocument","toHaveStyle","overflow","padding","firstChild","backgroundColor","shouldFormatCode","Light","toHaveTextContent"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.test.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-call */\nimport { fireEvent, render, screen, waitFor } from '@testing-library/react';\nimport React from 'react';\nimport { describe, expect, it, vi } from 'vitest';\nimport { CodeHighlighterTheme } from '../../types/codeHighlighter';\nimport CodeHighlighter from './CodeHighlighter';\n\nvi.mock('@chayns-components/core', () => ({\n    Icon: ({ icons }: { icons: string[] }) => <span data-icons={icons.join(' ')} />,\n    SharingContextMenu: ({\n        children,\n        shouldShowCallingCodeAction,\n        shouldShowCopyAction,\n    }: {\n        children: React.ReactNode;\n        shouldShowCallingCodeAction?: boolean;\n        shouldShowCopyAction?: boolean;\n    }) => (\n        <div\n            data-calling-code-action={shouldShowCallingCodeAction}\n            data-copy-action={shouldShowCopyAction}\n        >\n            {children}\n        </div>\n    ),\n    useColorScheme: () => undefined,\n}));\n\nvi.mock('@chayns-components/textstring', () => ({\n    ttsToITextString: (value: unknown) => value,\n    useTextstringValue: ({ textstring }: { textstring: { fallback: string } }) =>\n        textstring.fallback,\n}));\n\nvi.mock('chayns-api', () => ({\n    DialogType: { TOAST: 1 },\n    ToastType: { ERROR: 4, SUCCESS: 2 },\n    createDialog: vi.fn(() => ({ open: vi.fn() })),\n}));\n\ndescribe('CodeHighlighter', () => {\n    it('keeps the copy operation and renders sticky actions', async () => {\n        const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n        const { container } = render(\n            <CodeHighlighter\n                code=\"const value = true;\"\n                copyButtonText=\"Copy code\"\n                language=\"typescript\"\n                shouldShowLineNumbers\n                theme={CodeHighlighterTheme.Dark}\n            />,\n        );\n\n        fireEvent.click(screen.getByRole('button', { name: 'Copy code' }));\n\n        await waitFor(() => {\n            expect(writeText).toHaveBeenCalledWith('const value = true;');\n            expect(container.querySelector('[data-icons=\"fa fa-check\"]')).toBeInTheDocument();\n        });\n        expect(container.querySelector('pre')).toHaveStyle({\n            overflow: 'auto',\n            padding: '0px 15px 15px',\n        });\n        expect(container.firstChild).toHaveStyle({ backgroundColor: 'rgb(40, 44, 52)' });\n        expect(container.querySelector('[data-copy-action=\"false\"]')).toBeInTheDocument();\n        expect(container.querySelector('[data-calling-code-action=\"false\"]')).toBeInTheDocument();\n    });\n\n    it('formats code before highlighting when requested', async () => {\n        const { container } = render(\n            <CodeHighlighter\n                code=\"const value={label:'Ada'};\"\n                language=\"typescript\"\n                shouldFormatCode\n                theme={CodeHighlighterTheme.Light}\n            />,\n        );\n\n        await waitFor(() => {\n            expect(container.querySelector('pre')).toHaveTextContent(\n                \"const value = { label: 'Ada' };\",\n            );\n        });\n        expect(container.querySelector('pre span')).toBeInTheDocument();\n        expect(container.firstChild).toHaveStyle({ backgroundColor: 'rgb(250, 250, 250)' });\n    });\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CodeHighlighter.test.js","names":["_react","require","_react2","_interopRequireDefault","_vitest","_codeHighlighter","_CodeHighlighter","e","__esModule","default","vi","mock","Icon","icons","createElement","join","SharingContextMenu","children","shouldShowCallingCodeAction","shouldShowCopyAction","useColorScheme","undefined","ttsToITextString","value","useTextstringValue","textstring","fallback","DialogType","TOAST","ToastType","ERROR","SUCCESS","createDialog","fn","open","describe","it","writeText","spyOn","navigator","clipboard","mockResolvedValue","container","render","code","copyButtonText","language","shouldShowLineNumbers","theme","CodeHighlighterTheme","Dark","fireEvent","click","screen","getByRole","name","waitFor","expect","toHaveBeenCalledWith","querySelector","toBeInTheDocument","toHaveStyle","overflow","padding","firstChild","backgroundColor","onInsertCode","shouldFormatCode","Light","toHaveTextContent"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.test.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-call */\nimport { fireEvent, render, screen, waitFor } from '@testing-library/react';\nimport React from 'react';\nimport { describe, expect, it, vi } from 'vitest';\nimport { CodeHighlighterTheme } from '../../types/codeHighlighter';\nimport CodeHighlighter from './CodeHighlighter';\n\nvi.mock('@chayns-components/core', () => ({\n    Icon: ({ icons }: { icons: string[] }) => <span data-icons={icons.join(' ')} />,\n    SharingContextMenu: ({\n        children,\n        shouldShowCallingCodeAction,\n        shouldShowCopyAction,\n    }: {\n        children: React.ReactNode;\n        shouldShowCallingCodeAction?: boolean;\n        shouldShowCopyAction?: boolean;\n    }) => (\n        <div\n            data-calling-code-action={shouldShowCallingCodeAction}\n            data-copy-action={shouldShowCopyAction}\n        >\n            {children}\n        </div>\n    ),\n    useColorScheme: () => undefined,\n}));\n\nvi.mock('@chayns-components/textstring', () => ({\n    ttsToITextString: (value: unknown) => value,\n    useTextstringValue: ({ textstring }: { textstring: { fallback: string } }) =>\n        textstring.fallback,\n}));\n\nvi.mock('chayns-api', () => ({\n    DialogType: { TOAST: 1 },\n    ToastType: { ERROR: 4, SUCCESS: 2 },\n    createDialog: vi.fn(() => ({ open: vi.fn() })),\n}));\n\ndescribe('CodeHighlighter', () => {\n    it('keeps the copy operation and renders sticky actions', async () => {\n        const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n        const { container } = render(\n            <CodeHighlighter\n                code=\"const value = true;\"\n                copyButtonText=\"Copy code\"\n                language=\"typescript\"\n                shouldShowLineNumbers\n                theme={CodeHighlighterTheme.Dark}\n            />,\n        );\n\n        fireEvent.click(screen.getByRole('button', { name: 'Copy code' }));\n\n        await waitFor(() => {\n            expect(writeText).toHaveBeenCalledWith('const value = true;');\n            expect(container.querySelector('[data-icons=\"fa fa-check\"]')).toBeInTheDocument();\n        });\n        expect(container.querySelector('pre')).toHaveStyle({\n            overflow: 'auto',\n            padding: '0px 15px 15px',\n        });\n        expect(container.firstChild).toHaveStyle({ backgroundColor: 'rgb(40, 44, 52)' });\n        expect(container.querySelector('[data-copy-action=\"false\"]')).toBeInTheDocument();\n        expect(container.querySelector('[data-calling-code-action=\"false\"]')).toBeInTheDocument();\n    });\n\n    it('renders an insert action when onInsertCode is provided', () => {\n        const onInsertCode = vi.fn();\n\n        render(\n            <CodeHighlighter\n                code=\"const value = true;\"\n                language=\"typescript\"\n                onInsertCode={onInsertCode}\n                theme={CodeHighlighterTheme.Dark}\n            />,\n        );\n\n        fireEvent.click(screen.getByRole('button', { name: 'Code einfügen' }));\n\n        expect(onInsertCode).toHaveBeenCalledWith('const value = true;');\n    });\n\n    it('formats code before highlighting when requested', async () => {\n        const { container } = render(\n            <CodeHighlighter\n                code=\"const value={label:'Ada'};\"\n                language=\"typescript\"\n                shouldFormatCode\n                theme={CodeHighlighterTheme.Light}\n            />,\n        );\n\n        await waitFor(() => {\n            expect(container.querySelector('pre')).toHaveTextContent(\n                \"const value = { label: 'Ada' };\",\n            );\n        });\n        expect(container.querySelector('pre span')).toBeInTheDocument();\n        expect(container.firstChild).toHaveStyle({ backgroundColor: 'rgb(250, 250, 250)' });\n    });\n});\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js

@@ -17,6 +17,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 const COPY_FEEDBACK_DURATION = 1500;
 const CopyToClipboard = ({
   copyButtonText,
+  onInsertCode,
   rootRef,
   text,
   theme
@@ -34,6 +35,9 @@ const CopyToClipboard = ({
   const shareText = (0, _textstring.useTextstringValue)({
     textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.codeHighlighter.copyToClipboard.share)
   });
+  const insertCodeText = (0, _textstring.useTextstringValue)({
+    textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.codeHighlighter.copyToClipboard.insertCode)
+  });
   const copyText = copyButtonText ?? defaultCopyText;
   const iconColor = theme === _codeHighlighter.CodeHighlighterTheme.Dark ? '#f4f6f8' : '#5f6368';
   (0, _react.useEffect)(() => () => {
@@ -69,6 +73,7 @@ const CopyToClipboard = ({
     onClick: () => {
       void handleCopy();
     },
+    title: copyText,
     type: "button"
   }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
     color: iconColor,
@@ -82,11 +87,24 @@ const CopyToClipboard = ({
     $codeTheme: theme,
     $isSticky: isActionGroupSticky,
     "aria-label": shareText,
+    title: shareText,
     type: "button"
   }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
     color: iconColor,
     icons: ['fa fa-share-nodes']
-  })))));
+  }))), typeof onInsertCode === 'function' && /*#__PURE__*/_react.default.createElement(_CopyToClipboard.StyledCopyToClipboardButton, {
+    $codeTheme: theme,
+    $isSticky: isActionGroupSticky,
+    "aria-label": insertCodeText,
+    onClick: () => {
+      onInsertCode(text);
+    },
+    title: insertCodeText,
+    type: "button"
+  }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
+    color: iconColor,
+    icons: ['fa fa-arrow-right']
+  }))));
 };
 CopyToClipboard.displayName = 'CopyToClipboard';
 var _default = exports.default = CopyToClipboard;

package/lib/cjs/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipboard.js","names":["_core","require","_textstring","_chaynsApi","_react","_interopRequireWildcard","_codeHighlighter","_CopyToClipboard","_textStrings","_interopRequireDefault","_useStickyActionState","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","COPY_FEEDBACK_DURATION","CopyToClipboard","copyButtonText","rootRef","text","theme","actionGroupRef","useRef","copyFeedbackTimeoutRef","isActionGroupSticky","useStickyActionState","hasCopied","setHasCopied","useState","defaultCopyText","useTextstringValue","textstring","ttsToITextString","textStrings","components","codeHighlighter","copyToClipboard","copy","copyFailedText","copyFailed","shareText","share","copyText","iconColor","CodeHighlighterTheme","Dark","useEffect","window","clearTimeout","current","showCopyFeedback","useCallback","setTimeout","handleCopy","navigator","clipboard","writeText","createDialog","showCloseIcon","toastType","ToastType","ERROR","type","DialogType","TOAST","open","createElement","StyledCopyToClipboard","$codeTheme","ref","StyledCopyToClipboardActionGroup","StyledCopyToClipboardButton","$isSticky","onClick","Icon","color","icons","SharingContextMenu","link","shouldShowCallingCodeAction","shouldShowCopyAction","shouldUseDefaultTriggerStyles","displayName","_default","exports"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.tsx"],"sourcesContent":["import { Icon, SharingContextMenu } from '@chayns-components/core';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport { createDialog, DialogType, ToastType } from 'chayns-api';\nimport React, { FC, RefObject, useCallback, useEffect, useRef, useState } from 'react';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\nimport {\n    StyledCopyToClipboard,\n    StyledCopyToClipboardActionGroup,\n    StyledCopyToClipboardButton,\n} from './CopyToClipboard.styles';\nimport textStrings from '../../../constants/textStrings';\nimport { useStickyActionState } from './useStickyActionState';\n\nexport type CopyToClipboardProps = {\n    copyButtonText?: string;\n    rootRef: RefObject<HTMLDivElement>;\n    text: string;\n    theme: CodeHighlighterTheme;\n};\n\nconst COPY_FEEDBACK_DURATION = 1500;\n\nconst CopyToClipboard: FC<CopyToClipboardProps> = ({ copyButtonText, rootRef, text, theme }) => {\n    const actionGroupRef = useRef<HTMLDivElement>(null);\n    const copyFeedbackTimeoutRef = useRef<number>();\n    const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\n    const [hasCopied, setHasCopied] = useState(false);\n\n    const defaultCopyText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copy),\n    });\n    const copyFailedText = useTextstringValue({\n        textstring: ttsToITextString(\n            textStrings.components.codeHighlighter.copyToClipboard.copyFailed,\n        ),\n    });\n    const shareText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.share),\n    });\n\n    const copyText = copyButtonText ?? defaultCopyText;\n    const iconColor = theme === CodeHighlighterTheme.Dark ? '#f4f6f8' : '#5f6368';\n\n    useEffect(\n        () => () => {\n            window.clearTimeout(copyFeedbackTimeoutRef.current);\n        },\n        [],\n    );\n\n    const showCopyFeedback = useCallback(() => {\n        window.clearTimeout(copyFeedbackTimeoutRef.current);\n        setHasCopied(true);\n\n        copyFeedbackTimeoutRef.current = window.setTimeout(() => {\n            setHasCopied(false);\n        }, COPY_FEEDBACK_DURATION);\n    }, []);\n\n    const handleCopy = useCallback(async () => {\n        try {\n            await navigator.clipboard.writeText(text);\n            showCopyFeedback();\n        } catch {\n            void createDialog({\n                showCloseIcon: true,\n                text: copyFailedText,\n                toastType: ToastType.ERROR,\n                type: DialogType.TOAST,\n            }).open();\n        }\n    }, [copyFailedText, showCopyFeedback, text]);\n\n    return (\n        <StyledCopyToClipboard $codeTheme={theme} ref={actionGroupRef}>\n            <StyledCopyToClipboardActionGroup>\n                <StyledCopyToClipboardButton\n                    $codeTheme={theme}\n                    $isSticky={isActionGroupSticky}\n                    aria-label={copyText}\n                    onClick={() => {\n                        void handleCopy();\n                    }}\n                    type=\"button\"\n                >\n                    <Icon\n                        color={iconColor}\n                        icons={hasCopied ? ['fa fa-check'] : ['fa-light fa-copy']}\n                    />\n                </StyledCopyToClipboardButton>\n                <SharingContextMenu\n                    link={text}\n                    shouldShowCallingCodeAction={false}\n                    shouldShowCopyAction={false}\n                    shouldUseDefaultTriggerStyles={false}\n                >\n                    <StyledCopyToClipboardButton\n                        $codeTheme={theme}\n                        $isSticky={isActionGroupSticky}\n                        aria-label={shareText}\n                        type=\"button\"\n                    >\n                        <Icon color={iconColor} icons={['fa fa-share-nodes']} />\n                    </StyledCopyToClipboardButton>\n                </SharingContextMenu>\n            </StyledCopyToClipboardActionGroup>\n        </StyledCopyToClipboard>\n    );\n};\n\nCopyToClipboard.displayName = 'CopyToClipboard';\n\nexport default CopyToClipboard;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CopyToClipboard.js","names":["_core","require","_textstring","_chaynsApi","_react","_interopRequireWildcard","_codeHighlighter","_CopyToClipboard","_textStrings","_interopRequireDefault","_useStickyActionState","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","COPY_FEEDBACK_DURATION","CopyToClipboard","copyButtonText","onInsertCode","rootRef","text","theme","actionGroupRef","useRef","copyFeedbackTimeoutRef","isActionGroupSticky","useStickyActionState","hasCopied","setHasCopied","useState","defaultCopyText","useTextstringValue","textstring","ttsToITextString","textStrings","components","codeHighlighter","copyToClipboard","copy","copyFailedText","copyFailed","shareText","share","insertCodeText","insertCode","copyText","iconColor","CodeHighlighterTheme","Dark","useEffect","window","clearTimeout","current","showCopyFeedback","useCallback","setTimeout","handleCopy","navigator","clipboard","writeText","createDialog","showCloseIcon","toastType","ToastType","ERROR","type","DialogType","TOAST","open","createElement","StyledCopyToClipboard","$codeTheme","ref","StyledCopyToClipboardActionGroup","StyledCopyToClipboardButton","$isSticky","onClick","title","Icon","color","icons","SharingContextMenu","link","shouldShowCallingCodeAction","shouldShowCopyAction","shouldUseDefaultTriggerStyles","displayName","_default","exports"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.tsx"],"sourcesContent":["import { Icon, SharingContextMenu } from '@chayns-components/core';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport { createDialog, DialogType, ToastType } from 'chayns-api';\nimport React, { FC, RefObject, useCallback, useEffect, useRef, useState } from 'react';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\nimport {\n    StyledCopyToClipboard,\n    StyledCopyToClipboardActionGroup,\n    StyledCopyToClipboardButton,\n} from './CopyToClipboard.styles';\nimport textStrings from '../../../constants/textStrings';\nimport { useStickyActionState } from './useStickyActionState';\n\nexport type CopyToClipboardProps = {\n    copyButtonText?: string;\n    onInsertCode?: (code: string) => void;\n    rootRef: RefObject<HTMLDivElement>;\n    text: string;\n    theme: CodeHighlighterTheme;\n};\n\nconst COPY_FEEDBACK_DURATION = 1500;\n\nconst CopyToClipboard: FC<CopyToClipboardProps> = ({\n    copyButtonText,\n    onInsertCode,\n    rootRef,\n    text,\n    theme,\n}) => {\n    const actionGroupRef = useRef<HTMLDivElement>(null);\n    const copyFeedbackTimeoutRef = useRef<number>();\n    const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\n    const [hasCopied, setHasCopied] = useState(false);\n\n    const defaultCopyText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copy),\n    });\n    const copyFailedText = useTextstringValue({\n        textstring: ttsToITextString(\n            textStrings.components.codeHighlighter.copyToClipboard.copyFailed,\n        ),\n    });\n    const shareText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.share),\n    });\n    const insertCodeText = useTextstringValue({\n        textstring: ttsToITextString(\n            textStrings.components.codeHighlighter.copyToClipboard.insertCode,\n        ),\n    });\n\n    const copyText = copyButtonText ?? defaultCopyText;\n    const iconColor = theme === CodeHighlighterTheme.Dark ? '#f4f6f8' : '#5f6368';\n\n    useEffect(\n        () => () => {\n            window.clearTimeout(copyFeedbackTimeoutRef.current);\n        },\n        [],\n    );\n\n    const showCopyFeedback = useCallback(() => {\n        window.clearTimeout(copyFeedbackTimeoutRef.current);\n        setHasCopied(true);\n\n        copyFeedbackTimeoutRef.current = window.setTimeout(() => {\n            setHasCopied(false);\n        }, COPY_FEEDBACK_DURATION);\n    }, []);\n\n    const handleCopy = useCallback(async () => {\n        try {\n            await navigator.clipboard.writeText(text);\n            showCopyFeedback();\n        } catch {\n            void createDialog({\n                showCloseIcon: true,\n                text: copyFailedText,\n                toastType: ToastType.ERROR,\n                type: DialogType.TOAST,\n            }).open();\n        }\n    }, [copyFailedText, showCopyFeedback, text]);\n\n    return (\n        <StyledCopyToClipboard $codeTheme={theme} ref={actionGroupRef}>\n            <StyledCopyToClipboardActionGroup>\n                <StyledCopyToClipboardButton\n                    $codeTheme={theme}\n                    $isSticky={isActionGroupSticky}\n                    aria-label={copyText}\n                    onClick={() => {\n                        void handleCopy();\n                    }}\n                    title={copyText}\n                    type=\"button\"\n                >\n                    <Icon\n                        color={iconColor}\n                        icons={hasCopied ? ['fa fa-check'] : ['fa-light fa-copy']}\n                    />\n                </StyledCopyToClipboardButton>\n                <SharingContextMenu\n                    link={text}\n                    shouldShowCallingCodeAction={false}\n                    shouldShowCopyAction={false}\n                    shouldUseDefaultTriggerStyles={false}\n                >\n                    <StyledCopyToClipboardButton\n                        $codeTheme={theme}\n                        $isSticky={isActionGroupSticky}\n                        aria-label={shareText}\n                        title={shareText}\n                        type=\"button\"\n                    >\n                        <Icon color={iconColor} icons={['fa fa-share-nodes']} />\n                    </StyledCopyToClipboardButton>\n                </SharingContextMenu>\n                {typeof onInsertCode === 'function' && (\n                    <StyledCopyToClipboardButton\n                        $codeTheme={theme}\n                        $isSticky={isActionGroupSticky}\n                        aria-label={insertCodeText}\n                        onClick={() => {\n                            onInsertCode(text);\n                        }}\n                        title={insertCodeText}\n                        type=\"button\"\n                    >\n                        <Icon color={iconColor} icons={['fa fa-arrow-right']} />\n                    </StyledCopyToClipboardButton>\n                )}\n            </StyledCopyToClipboardActionGroup>\n        </StyledCopyToClipboard>\n    );\n};\n\nCopyToClipboard.displayName = 'CopyToClipboard';\n\nexport default CopyToClipboard;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/constants/textStrings.js

@@ -16,6 +16,10 @@ var _default = exports.default = {
           stringName: 'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copyFailed',
           fallback: 'Kopieren fehlgeschlagen'
         },
+        insertCode: {
+          stringName: 'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_insertCode',
+          fallback: 'Code einfügen'
+        },
         share: {
           stringName: 'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_share',
           fallback: 'Teilen'

package/lib/cjs/constants/textStrings.js.map

@@ -1 +1 @@
-{"version":3,"file":"textStrings.js","names":["components","codeHighlighter","copyToClipboard","copy","stringName","fallback","copyFailed","share"],"sources":["../../../src/constants/textStrings.ts"],"sourcesContent":["export default {\n    components: {\n        codeHighlighter: {\n            copyToClipboard: {\n                copy: {\n                    stringName:\n                        'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copy',\n                    fallback: 'Kopieren',\n                },\n                copyFailed: {\n                    stringName:\n                        'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copyFailed',\n                    fallback: 'Kopieren fehlgeschlagen',\n                },\n                share: {\n                    stringName:\n                        'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_share',\n                    fallback: 'Teilen',\n                },\n            },\n        },\n    },\n} as const;\n"],"mappings":";;;;;;iCAAe;EACXA,UAAU,EAAE;IACRC,eAAe,EAAE;MACbC,eAAe,EAAE;QACbC,IAAI,EAAE;UACFC,UAAU,EACN,wFAAwF;UAC5FC,QAAQ,EAAE;QACd,CAAC;QACDC,UAAU,EAAE;UACRF,UAAU,EACN,8FAA8F;UAClGC,QAAQ,EAAE;QACd,CAAC;QACDE,KAAK,EAAE;UACHH,UAAU,EACN,yFAAyF;UAC7FC,QAAQ,EAAE;QACd;MACJ;IACJ;EACJ;AACJ,CAAC","ignoreList":[]}
+{"version":3,"file":"textStrings.js","names":["components","codeHighlighter","copyToClipboard","copy","stringName","fallback","copyFailed","insertCode","share"],"sources":["../../../src/constants/textStrings.ts"],"sourcesContent":["export default {\n    components: {\n        codeHighlighter: {\n            copyToClipboard: {\n                copy: {\n                    stringName:\n                        'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copy',\n                    fallback: 'Kopieren',\n                },\n                copyFailed: {\n                    stringName:\n                        'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copyFailed',\n                    fallback: 'Kopieren fehlgeschlagen',\n                },\n                insertCode: {\n                    stringName:\n                        'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_insertCode',\n                    fallback: 'Code einfügen',\n                },\n                share: {\n                    stringName:\n                        'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_share',\n                    fallback: 'Teilen',\n                },\n            },\n        },\n    },\n} as const;\n"],"mappings":";;;;;;iCAAe;EACXA,UAAU,EAAE;IACRC,eAAe,EAAE;MACbC,eAAe,EAAE;QACbC,IAAI,EAAE;UACFC,UAAU,EACN,wFAAwF;UAC5FC,QAAQ,EAAE;QACd,CAAC;QACDC,UAAU,EAAE;UACRF,UAAU,EACN,8FAA8F;UAClGC,QAAQ,EAAE;QACd,CAAC;QACDE,UAAU,EAAE;UACRH,UAAU,EACN,8FAA8F;UAClGC,QAAQ,EAAE;QACd,CAAC;QACDG,KAAK,EAAE;UACHJ,UAAU,EACN,yFAAyF;UAC7FC,QAAQ,EAAE;QACd;MACJ;IACJ;EACJ;AACJ,CAAC","ignoreList":[]}

package/lib/esm/components/code-highlighter/CodeHighlighter.js

@@ -24,6 +24,7 @@ const CodeHighlighter = ({
   highlightedLines,
   shouldFormatCode = false,
   onFormatError,
+  onInsertCode,
   shouldShowLineNumbers = false,
   shouldWrapLines
 }) => {
@@ -138,6 +139,7 @@ const CodeHighlighter = ({
     text: code,
     theme: resolvedTheme,
     copyButtonText: copyButtonText,
+    onInsertCode: onInsertCode,
     rootRef: ref
   }), /*#__PURE__*/React.createElement(SyntaxHighlighter, {
     customStyle: syntaxHighlighterStyle,
@@ -148,7 +150,7 @@ const CodeHighlighter = ({
     wrapLines: true,
     wrapLongLines: shouldWrapLines,
     lineProps: lineWrapper
-  }, formattedCode)), [shouldWrapLines, resolvedTheme, language, code, copyButtonText, lineNumberStyle, syntaxHighlighterStyle, shouldShowLineNumbers, lineWrapper, formattedCode]);
+  }, formattedCode)), [shouldWrapLines, resolvedTheme, language, code, copyButtonText, onInsertCode, lineNumberStyle, syntaxHighlighterStyle, shouldShowLineNumbers, lineWrapper, formattedCode]);
 };
 CodeHighlighter.displayName = 'CodeHighlighter';
 export default CodeHighlighter;

package/lib/esm/components/code-highlighter/CodeHighlighter.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeHighlighter.js","names":["format","React","useCallback","useEffect","useMemo","useRef","useState","Prism","SyntaxHighlighter","oneDark","oneLight","useColorScheme","CodeHighlighterTheme","formatLanguage","getParserForLanguage","StyledCodeHighlighter","StyledCodeHighlighterFileName","StyledCodeHighlighterHeader","CopyToClipboard","addScrollbarClassToPre","root","className","preElement","querySelector","classList","add","CodeHighlighter","theme","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","shouldWrapLines","colorScheme","width","setWidth","formattedCode","setFormattedCode","ref","resolvedTheme","colorMode","Dark","Light","current","handleResize","children","Array","from","find","tagName","toLowerCase","scrollWidth","window","addEventListener","removeEventListener","lineWrapper","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","lineNumberStyle","WebkitUserSelect","syntaxHighlighterStyle","padding","isCurrent","then","config","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","$shouldWrapLines","$codeTheme","text","rootRef","customStyle","showLineNumbers","wrapLines","wrapLongLines","lineProps","displayName"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport { useColorScheme } from '@chayns-components/core';\nimport {\n    CodeHighlighterLanguage,\n    CodeHighlighterTheme,\n    HighlightedLines,\n} from '../../types/codeHighlighter';\nimport { formatLanguage, getParserForLanguage } from '../../utils/codeHighlighter';\nimport {\n    StyledCodeHighlighter,\n    StyledCodeHighlighterFileName,\n    StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\ntype AddScrollbarClassOptions = {\n    root: HTMLDivElement | null;\n    className: string;\n};\n\nconst addScrollbarClassToPre = ({ root, className }: AddScrollbarClassOptions) => {\n    if (!root) return;\n\n    const preElement = root.querySelector('pre');\n    if (!preElement) return;\n\n    preElement.classList.add(className);\n};\n\nexport type CodeHighlighterProps = {\n    /**\n     * The code that should be displayed.\n     */\n    code: string;\n    /**\n     * The text that should be displayed after the copy button.\n     * If not set, just the button is displayed without text.\n     */\n    copyButtonText?: string;\n    /**\n     * The lines of code that should be highlighted.\n     * Following lines can be highlighted: added, removed and just marked.\n     */\n    highlightedLines?: HighlightedLines;\n    /**\n     * The language of the displayed code.\n     */\n    language: CodeHighlighterLanguage;\n    /**\n     * Function to be executed when the formatting of the code fails.\n     */\n    onFormatError?: (error: unknown) => void;\n    /**\n     * Whether the code should be formatted with prettier.\n     */\n    shouldFormatCode?: boolean;\n    /**\n     * Whether the line numbers should be displayed.\n     */\n    shouldShowLineNumbers?: boolean;\n    /**\n     * Whether long lines should be wrapped.\n     */\n    shouldWrapLines?: boolean;\n    /**\n     * The theme of the code block. Decide between dark and light.\n     */\n    theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n    theme,\n    code,\n    copyButtonText,\n    language,\n    highlightedLines,\n    shouldFormatCode = false,\n    onFormatError,\n    shouldShowLineNumbers = false,\n    shouldWrapLines,\n}) => {\n    const colorScheme = useColorScheme();\n\n    const [width, setWidth] = useState(0);\n    const [formattedCode, setFormattedCode] = useState(code);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const resolvedTheme =\n        theme ??\n        (colorScheme?.theme.colorMode === 'dark'\n            ? CodeHighlighterTheme.Dark\n            : CodeHighlighterTheme.Light);\n\n    useEffect(() => {\n        addScrollbarClassToPre({ root: ref.current, className: 'chayns-scrollbar' });\n    }, []);\n\n    useEffect(() => {\n        const handleResize = () => {\n            if (ref.current) {\n                const { children } = ref.current;\n\n                const preElement = Array.from(children).find(\n                    ({ tagName }) => tagName.toLowerCase() === 'pre',\n                );\n\n                if (preElement) {\n                    setWidth(preElement.scrollWidth);\n                }\n            }\n        };\n\n        handleResize();\n\n        window.addEventListener('resize', handleResize);\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, []);\n\n    // function to style highlighted code\n    const lineWrapper = useCallback(\n        (lineNumber: number) => {\n            let style = {\n                backgroundColor: 'none',\n                display: 'block',\n                borderRadius: '2px',\n                width: width - 15,\n            };\n\n            if (highlightedLines?.added && highlightedLines.added.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#2EF29930' };\n            } else if (highlightedLines?.removed && highlightedLines.removed.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#F22E5B30' };\n            } else if (highlightedLines?.marked && highlightedLines.marked.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#cccccc40' };\n            }\n\n            return { style };\n        },\n        [highlightedLines, width],\n    );\n\n    const lineNumberStyle = useMemo(\n        () => ({\n            WebkitUserSelect: 'none' as const,\n        }),\n        [],\n    );\n\n    const syntaxHighlighterStyle = useMemo(\n        () => ({\n            padding: '0 15px 15px',\n        }),\n        [],\n    );\n\n    useEffect(() => {\n        let isCurrent = true;\n\n        if (!shouldFormatCode) {\n            setFormattedCode(code);\n\n            return () => {\n                isCurrent = false;\n            };\n        }\n\n        void getParserForLanguage(language).then((config) => {\n            if (!config || !isCurrent) {\n                return;\n            }\n\n            try {\n                setFormattedCode(format(code, config) as unknown as string);\n            } catch (error) {\n                onFormatError?.(error);\n                setFormattedCode(code);\n            }\n        });\n\n        return () => {\n            isCurrent = false;\n        };\n    }, [code, language, onFormatError, shouldFormatCode]);\n\n    useEffect(() => {\n        const elements = document.getElementsByClassName('linenumber');\n\n        Array.from(elements).forEach((element) => {\n            const wrapper = document.createElement('tw-ignore');\n\n            while (element.firstChild) {\n                wrapper.appendChild(element.firstChild);\n            }\n\n            element.appendChild(wrapper);\n        });\n    }, []);\n\n    return useMemo(\n        () => (\n            <StyledCodeHighlighter\n                $shouldWrapLines={shouldWrapLines}\n                $codeTheme={resolvedTheme}\n                ref={ref}\n            >\n                <StyledCodeHighlighterHeader $codeTheme={resolvedTheme}>\n                    <StyledCodeHighlighterFileName $codeTheme={resolvedTheme}>\n                        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n                        {/* @ts-ignore */}\n                        <tw-ignore>{formatLanguage(language)}</tw-ignore>\n                    </StyledCodeHighlighterFileName>\n                </StyledCodeHighlighterHeader>\n                <CopyToClipboard\n                    text={code}\n                    theme={resolvedTheme}\n                    copyButtonText={copyButtonText}\n                    rootRef={ref}\n                />\n                <SyntaxHighlighter\n                    customStyle={syntaxHighlighterStyle}\n                    language={language ?? ''}\n                    lineNumberStyle={lineNumberStyle}\n                    showLineNumbers={shouldShowLineNumbers}\n                    style={resolvedTheme === CodeHighlighterTheme.Dark ? oneDark : oneLight}\n                    wrapLines\n                    wrapLongLines={shouldWrapLines}\n                    lineProps={lineWrapper}\n                >\n                    {formattedCode}\n                </SyntaxHighlighter>\n            </StyledCodeHighlighter>\n        ),\n        [\n            shouldWrapLines,\n            resolvedTheme,\n            language,\n            code,\n            copyButtonText,\n            lineNumberStyle,\n            syntaxHighlighterStyle,\n            shouldShowLineNumbers,\n            lineWrapper,\n            formattedCode,\n        ],\n    );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CodeHighlighter.js","names":["format","React","useCallback","useEffect","useMemo","useRef","useState","Prism","SyntaxHighlighter","oneDark","oneLight","useColorScheme","CodeHighlighterTheme","formatLanguage","getParserForLanguage","StyledCodeHighlighter","StyledCodeHighlighterFileName","StyledCodeHighlighterHeader","CopyToClipboard","addScrollbarClassToPre","root","className","preElement","querySelector","classList","add","CodeHighlighter","theme","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","onInsertCode","shouldShowLineNumbers","shouldWrapLines","colorScheme","width","setWidth","formattedCode","setFormattedCode","ref","resolvedTheme","colorMode","Dark","Light","current","handleResize","children","Array","from","find","tagName","toLowerCase","scrollWidth","window","addEventListener","removeEventListener","lineWrapper","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","lineNumberStyle","WebkitUserSelect","syntaxHighlighterStyle","padding","isCurrent","then","config","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","$shouldWrapLines","$codeTheme","text","rootRef","customStyle","showLineNumbers","wrapLines","wrapLongLines","lineProps","displayName"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport { useColorScheme } from '@chayns-components/core';\nimport {\n    CodeHighlighterLanguage,\n    CodeHighlighterTheme,\n    HighlightedLines,\n} from '../../types/codeHighlighter';\nimport { formatLanguage, getParserForLanguage } from '../../utils/codeHighlighter';\nimport {\n    StyledCodeHighlighter,\n    StyledCodeHighlighterFileName,\n    StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\ntype AddScrollbarClassOptions = {\n    root: HTMLDivElement | null;\n    className: string;\n};\n\nconst addScrollbarClassToPre = ({ root, className }: AddScrollbarClassOptions) => {\n    if (!root) return;\n\n    const preElement = root.querySelector('pre');\n    if (!preElement) return;\n\n    preElement.classList.add(className);\n};\n\nexport type CodeHighlighterProps = {\n    /**\n     * The code that should be displayed.\n     */\n    code: string;\n    /**\n     * The text that should be displayed after the copy button.\n     * If not set, just the button is displayed without text.\n     */\n    copyButtonText?: string;\n    /**\n     * The lines of code that should be highlighted.\n     * Following lines can be highlighted: added, removed and just marked.\n     */\n    highlightedLines?: HighlightedLines;\n    /**\n     * The language of the displayed code.\n     */\n    language: CodeHighlighterLanguage;\n    /**\n     * Function to be executed when the formatting of the code fails.\n     */\n    onFormatError?: (error: unknown) => void;\n    /**\n     * Function to be executed when the code should be inserted into another target.\n     */\n    onInsertCode?: (code: string) => void;\n    /**\n     * Whether the code should be formatted with prettier.\n     */\n    shouldFormatCode?: boolean;\n    /**\n     * Whether the line numbers should be displayed.\n     */\n    shouldShowLineNumbers?: boolean;\n    /**\n     * Whether long lines should be wrapped.\n     */\n    shouldWrapLines?: boolean;\n    /**\n     * The theme of the code block. Decide between dark and light.\n     */\n    theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n    theme,\n    code,\n    copyButtonText,\n    language,\n    highlightedLines,\n    shouldFormatCode = false,\n    onFormatError,\n    onInsertCode,\n    shouldShowLineNumbers = false,\n    shouldWrapLines,\n}) => {\n    const colorScheme = useColorScheme();\n\n    const [width, setWidth] = useState(0);\n    const [formattedCode, setFormattedCode] = useState(code);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const resolvedTheme =\n        theme ??\n        (colorScheme?.theme.colorMode === 'dark'\n            ? CodeHighlighterTheme.Dark\n            : CodeHighlighterTheme.Light);\n\n    useEffect(() => {\n        addScrollbarClassToPre({ root: ref.current, className: 'chayns-scrollbar' });\n    }, []);\n\n    useEffect(() => {\n        const handleResize = () => {\n            if (ref.current) {\n                const { children } = ref.current;\n\n                const preElement = Array.from(children).find(\n                    ({ tagName }) => tagName.toLowerCase() === 'pre',\n                );\n\n                if (preElement) {\n                    setWidth(preElement.scrollWidth);\n                }\n            }\n        };\n\n        handleResize();\n\n        window.addEventListener('resize', handleResize);\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, []);\n\n    // function to style highlighted code\n    const lineWrapper = useCallback(\n        (lineNumber: number) => {\n            let style = {\n                backgroundColor: 'none',\n                display: 'block',\n                borderRadius: '2px',\n                width: width - 15,\n            };\n\n            if (highlightedLines?.added && highlightedLines.added.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#2EF29930' };\n            } else if (highlightedLines?.removed && highlightedLines.removed.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#F22E5B30' };\n            } else if (highlightedLines?.marked && highlightedLines.marked.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#cccccc40' };\n            }\n\n            return { style };\n        },\n        [highlightedLines, width],\n    );\n\n    const lineNumberStyle = useMemo(\n        () => ({\n            WebkitUserSelect: 'none' as const,\n        }),\n        [],\n    );\n\n    const syntaxHighlighterStyle = useMemo(\n        () => ({\n            padding: '0 15px 15px',\n        }),\n        [],\n    );\n\n    useEffect(() => {\n        let isCurrent = true;\n\n        if (!shouldFormatCode) {\n            setFormattedCode(code);\n\n            return () => {\n                isCurrent = false;\n            };\n        }\n\n        void getParserForLanguage(language).then((config) => {\n            if (!config || !isCurrent) {\n                return;\n            }\n\n            try {\n                setFormattedCode(format(code, config) as unknown as string);\n            } catch (error) {\n                onFormatError?.(error);\n                setFormattedCode(code);\n            }\n        });\n\n        return () => {\n            isCurrent = false;\n        };\n    }, [code, language, onFormatError, shouldFormatCode]);\n\n    useEffect(() => {\n        const elements = document.getElementsByClassName('linenumber');\n\n        Array.from(elements).forEach((element) => {\n            const wrapper = document.createElement('tw-ignore');\n\n            while (element.firstChild) {\n                wrapper.appendChild(element.firstChild);\n            }\n\n            element.appendChild(wrapper);\n        });\n    }, []);\n\n    return useMemo(\n        () => (\n            <StyledCodeHighlighter\n                $shouldWrapLines={shouldWrapLines}\n                $codeTheme={resolvedTheme}\n                ref={ref}\n            >\n                <StyledCodeHighlighterHeader $codeTheme={resolvedTheme}>\n                    <StyledCodeHighlighterFileName $codeTheme={resolvedTheme}>\n                        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n                        {/* @ts-ignore */}\n                        <tw-ignore>{formatLanguage(language)}</tw-ignore>\n                    </StyledCodeHighlighterFileName>\n                </StyledCodeHighlighterHeader>\n                <CopyToClipboard\n                    text={code}\n                    theme={resolvedTheme}\n                    copyButtonText={copyButtonText}\n                    onInsertCode={onInsertCode}\n                    rootRef={ref}\n                />\n                <SyntaxHighlighter\n                    customStyle={syntaxHighlighterStyle}\n                    language={language ?? ''}\n                    lineNumberStyle={lineNumberStyle}\n                    showLineNumbers={shouldShowLineNumbers}\n                    style={resolvedTheme === CodeHighlighterTheme.Dark ? oneDark : oneLight}\n                    wrapLines\n                    wrapLongLines={shouldWrapLines}\n                    lineProps={lineWrapper}\n                >\n                    {formattedCode}\n                </SyntaxHighlighter>\n            </StyledCodeHighlighter>\n        ),\n        [\n            shouldWrapLines,\n            resolvedTheme,\n            language,\n            code,\n            copyButtonText,\n            onInsertCode,\n            lineNumberStyle,\n            syntaxHighlighterStyle,\n            shouldShowLineNumbers,\n            lineWrapper,\n            formattedCode,\n        ],\n    );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/code-highlighter/CodeHighlighter.test.js

@@ -67,6 +67,19 @@ describe('CodeHighlighter', () => {
     expect(container.querySelector('[data-copy-action="false"]')).toBeInTheDocument();
     expect(container.querySelector('[data-calling-code-action="false"]')).toBeInTheDocument();
   });
+  it('renders an insert action when onInsertCode is provided', () => {
+    const onInsertCode = vi.fn();
+    render(/*#__PURE__*/React.createElement(CodeHighlighter, {
+      code: "const value = true;",
+      language: "typescript",
+      onInsertCode: onInsertCode,
+      theme: CodeHighlighterTheme.Dark
+    }));
+    fireEvent.click(screen.getByRole('button', {
+      name: 'Code einfügen'
+    }));
+    expect(onInsertCode).toHaveBeenCalledWith('const value = true;');
+  });
   it('formats code before highlighting when requested', async () => {
     const {
       container

package/lib/esm/components/code-highlighter/CodeHighlighter.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeHighlighter.test.js","names":["fireEvent","render","screen","waitFor","React","describe","expect","it","vi","CodeHighlighterTheme","CodeHighlighter","mock","Icon","icons","createElement","join","SharingContextMenu","children","shouldShowCallingCodeAction","shouldShowCopyAction","useColorScheme","undefined","ttsToITextString","value","useTextstringValue","textstring","fallback","DialogType","TOAST","ToastType","ERROR","SUCCESS","createDialog","fn","open","writeText","spyOn","navigator","clipboard","mockResolvedValue","container","code","copyButtonText","language","shouldShowLineNumbers","theme","Dark","click","getByRole","name","toHaveBeenCalledWith","querySelector","toBeInTheDocument","toHaveStyle","overflow","padding","firstChild","backgroundColor","shouldFormatCode","Light","toHaveTextContent"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.test.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-call */\nimport { fireEvent, render, screen, waitFor } from '@testing-library/react';\nimport React from 'react';\nimport { describe, expect, it, vi } from 'vitest';\nimport { CodeHighlighterTheme } from '../../types/codeHighlighter';\nimport CodeHighlighter from './CodeHighlighter';\n\nvi.mock('@chayns-components/core', () => ({\n    Icon: ({ icons }: { icons: string[] }) => <span data-icons={icons.join(' ')} />,\n    SharingContextMenu: ({\n        children,\n        shouldShowCallingCodeAction,\n        shouldShowCopyAction,\n    }: {\n        children: React.ReactNode;\n        shouldShowCallingCodeAction?: boolean;\n        shouldShowCopyAction?: boolean;\n    }) => (\n        <div\n            data-calling-code-action={shouldShowCallingCodeAction}\n            data-copy-action={shouldShowCopyAction}\n        >\n            {children}\n        </div>\n    ),\n    useColorScheme: () => undefined,\n}));\n\nvi.mock('@chayns-components/textstring', () => ({\n    ttsToITextString: (value: unknown) => value,\n    useTextstringValue: ({ textstring }: { textstring: { fallback: string } }) =>\n        textstring.fallback,\n}));\n\nvi.mock('chayns-api', () => ({\n    DialogType: { TOAST: 1 },\n    ToastType: { ERROR: 4, SUCCESS: 2 },\n    createDialog: vi.fn(() => ({ open: vi.fn() })),\n}));\n\ndescribe('CodeHighlighter', () => {\n    it('keeps the copy operation and renders sticky actions', async () => {\n        const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n        const { container } = render(\n            <CodeHighlighter\n                code=\"const value = true;\"\n                copyButtonText=\"Copy code\"\n                language=\"typescript\"\n                shouldShowLineNumbers\n                theme={CodeHighlighterTheme.Dark}\n            />,\n        );\n\n        fireEvent.click(screen.getByRole('button', { name: 'Copy code' }));\n\n        await waitFor(() => {\n            expect(writeText).toHaveBeenCalledWith('const value = true;');\n            expect(container.querySelector('[data-icons=\"fa fa-check\"]')).toBeInTheDocument();\n        });\n        expect(container.querySelector('pre')).toHaveStyle({\n            overflow: 'auto',\n            padding: '0px 15px 15px',\n        });\n        expect(container.firstChild).toHaveStyle({ backgroundColor: 'rgb(40, 44, 52)' });\n        expect(container.querySelector('[data-copy-action=\"false\"]')).toBeInTheDocument();\n        expect(container.querySelector('[data-calling-code-action=\"false\"]')).toBeInTheDocument();\n    });\n\n    it('formats code before highlighting when requested', async () => {\n        const { container } = render(\n            <CodeHighlighter\n                code=\"const value={label:'Ada'};\"\n                language=\"typescript\"\n                shouldFormatCode\n                theme={CodeHighlighterTheme.Light}\n            />,\n        );\n\n        await waitFor(() => {\n            expect(container.querySelector('pre')).toHaveTextContent(\n                \"const value = { label: 'Ada' };\",\n            );\n        });\n        expect(container.querySelector('pre span')).toBeInTheDocument();\n        expect(container.firstChild).toHaveStyle({ backgroundColor: 'rgb(250, 250, 250)' });\n    });\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CodeHighlighter.test.js","names":["fireEvent","render","screen","waitFor","React","describe","expect","it","vi","CodeHighlighterTheme","CodeHighlighter","mock","Icon","icons","createElement","join","SharingContextMenu","children","shouldShowCallingCodeAction","shouldShowCopyAction","useColorScheme","undefined","ttsToITextString","value","useTextstringValue","textstring","fallback","DialogType","TOAST","ToastType","ERROR","SUCCESS","createDialog","fn","open","writeText","spyOn","navigator","clipboard","mockResolvedValue","container","code","copyButtonText","language","shouldShowLineNumbers","theme","Dark","click","getByRole","name","toHaveBeenCalledWith","querySelector","toBeInTheDocument","toHaveStyle","overflow","padding","firstChild","backgroundColor","onInsertCode","shouldFormatCode","Light","toHaveTextContent"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.test.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-call */\nimport { fireEvent, render, screen, waitFor } from '@testing-library/react';\nimport React from 'react';\nimport { describe, expect, it, vi } from 'vitest';\nimport { CodeHighlighterTheme } from '../../types/codeHighlighter';\nimport CodeHighlighter from './CodeHighlighter';\n\nvi.mock('@chayns-components/core', () => ({\n    Icon: ({ icons }: { icons: string[] }) => <span data-icons={icons.join(' ')} />,\n    SharingContextMenu: ({\n        children,\n        shouldShowCallingCodeAction,\n        shouldShowCopyAction,\n    }: {\n        children: React.ReactNode;\n        shouldShowCallingCodeAction?: boolean;\n        shouldShowCopyAction?: boolean;\n    }) => (\n        <div\n            data-calling-code-action={shouldShowCallingCodeAction}\n            data-copy-action={shouldShowCopyAction}\n        >\n            {children}\n        </div>\n    ),\n    useColorScheme: () => undefined,\n}));\n\nvi.mock('@chayns-components/textstring', () => ({\n    ttsToITextString: (value: unknown) => value,\n    useTextstringValue: ({ textstring }: { textstring: { fallback: string } }) =>\n        textstring.fallback,\n}));\n\nvi.mock('chayns-api', () => ({\n    DialogType: { TOAST: 1 },\n    ToastType: { ERROR: 4, SUCCESS: 2 },\n    createDialog: vi.fn(() => ({ open: vi.fn() })),\n}));\n\ndescribe('CodeHighlighter', () => {\n    it('keeps the copy operation and renders sticky actions', async () => {\n        const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n        const { container } = render(\n            <CodeHighlighter\n                code=\"const value = true;\"\n                copyButtonText=\"Copy code\"\n                language=\"typescript\"\n                shouldShowLineNumbers\n                theme={CodeHighlighterTheme.Dark}\n            />,\n        );\n\n        fireEvent.click(screen.getByRole('button', { name: 'Copy code' }));\n\n        await waitFor(() => {\n            expect(writeText).toHaveBeenCalledWith('const value = true;');\n            expect(container.querySelector('[data-icons=\"fa fa-check\"]')).toBeInTheDocument();\n        });\n        expect(container.querySelector('pre')).toHaveStyle({\n            overflow: 'auto',\n            padding: '0px 15px 15px',\n        });\n        expect(container.firstChild).toHaveStyle({ backgroundColor: 'rgb(40, 44, 52)' });\n        expect(container.querySelector('[data-copy-action=\"false\"]')).toBeInTheDocument();\n        expect(container.querySelector('[data-calling-code-action=\"false\"]')).toBeInTheDocument();\n    });\n\n    it('renders an insert action when onInsertCode is provided', () => {\n        const onInsertCode = vi.fn();\n\n        render(\n            <CodeHighlighter\n                code=\"const value = true;\"\n                language=\"typescript\"\n                onInsertCode={onInsertCode}\n                theme={CodeHighlighterTheme.Dark}\n            />,\n        );\n\n        fireEvent.click(screen.getByRole('button', { name: 'Code einfügen' }));\n\n        expect(onInsertCode).toHaveBeenCalledWith('const value = true;');\n    });\n\n    it('formats code before highlighting when requested', async () => {\n        const { container } = render(\n            <CodeHighlighter\n                code=\"const value={label:'Ada'};\"\n                language=\"typescript\"\n                shouldFormatCode\n                theme={CodeHighlighterTheme.Light}\n            />,\n        );\n\n        await waitFor(() => {\n            expect(container.querySelector('pre')).toHaveTextContent(\n                \"const value = { label: 'Ada' };\",\n            );\n        });\n        expect(container.querySelector('pre span')).toBeInTheDocument();\n        expect(container.firstChild).toHaveStyle({ backgroundColor: 'rgb(250, 250, 250)' });\n    });\n});\n"],"mappings":"AAAA;AACA,SAASA,SAAS,EAAEC,MAAM,EAAEC,MAAM,EAAEC,OAAO,QAAQ,wBAAwB;AAC3E,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAEC,MAAM,EAAEC,EAAE,EAAEC,EAAE,QAAQ,QAAQ;AACjD,SAASC,oBAAoB,QAAQ,6BAA6B;AAClE,OAAOC,eAAe,MAAM,mBAAmB;AAE/CF,EAAE,CAACG,IAAI,CAAC,yBAAyB,EAAE,OAAO;EACtCC,IAAI,EAAEA,CAAC;IAAEC;EAA2B,CAAC,kBAAKT,KAAA,CAAAU,aAAA;IAAM,cAAYD,KAAK,CAACE,IAAI,CAAC,GAAG;EAAE,CAAE,CAAC;EAC/EC,kBAAkB,EAAEA,CAAC;IACjBC,QAAQ;IACRC,2BAA2B;IAC3BC;EAKJ,CAAC,kBACGf,KAAA,CAAAU,aAAA;IACI,4BAA0BI,2BAA4B;IACtD,oBAAkBC;EAAqB,GAEtCF,QACA,CACR;EACDG,cAAc,EAAEA,CAAA,KAAMC;AAC1B,CAAC,CAAC,CAAC;AAEHb,EAAE,CAACG,IAAI,CAAC,+BAA+B,EAAE,OAAO;EAC5CW,gBAAgB,EAAGC,KAAc,IAAKA,KAAK;EAC3CC,kBAAkB,EAAEA,CAAC;IAAEC;EAAiD,CAAC,KACrEA,UAAU,CAACC;AACnB,CAAC,CAAC,CAAC;AAEHlB,EAAE,CAACG,IAAI,CAAC,YAAY,EAAE,OAAO;EACzBgB,UAAU,EAAE;IAAEC,KAAK,EAAE;EAAE,CAAC;EACxBC,SAAS,EAAE;IAAEC,KAAK,EAAE,CAAC;IAAEC,OAAO,EAAE;EAAE,CAAC;EACnCC,YAAY,EAAExB,EAAE,CAACyB,EAAE,CAAC,OAAO;IAAEC,IAAI,EAAE1B,EAAE,CAACyB,EAAE,CAAC;EAAE,CAAC,CAAC;AACjD,CAAC,CAAC,CAAC;AAEH5B,QAAQ,CAAC,iBAAiB,EAAE,MAAM;EAC9BE,EAAE,CAAC,qDAAqD,EAAE,YAAY;IAClE,MAAM4B,SAAS,GAAG3B,EAAE,CAAC4B,KAAK,CAACC,SAAS,CAACC,SAAS,EAAE,WAAW,CAAC,CAACC,iBAAiB,CAAC,CAAC;IAChF,MAAM;MAAEC;IAAU,CAAC,GAAGvC,MAAM,cACxBG,KAAA,CAAAU,aAAA,CAACJ,eAAe;MACZ+B,IAAI,EAAC,qBAAqB;MAC1BC,cAAc,EAAC,WAAW;MAC1BC,QAAQ,EAAC,YAAY;MACrBC,qBAAqB;MACrBC,KAAK,EAAEpC,oBAAoB,CAACqC;IAAK,CACpC,CACL,CAAC;IAED9C,SAAS,CAAC+C,KAAK,CAAC7C,MAAM,CAAC8C,SAAS,CAAC,QAAQ,EAAE;MAAEC,IAAI,EAAE;IAAY,CAAC,CAAC,CAAC;IAElE,MAAM9C,OAAO,CAAC,MAAM;MAChBG,MAAM,CAAC6B,SAAS,CAAC,CAACe,oBAAoB,CAAC,qBAAqB,CAAC;MAC7D5C,MAAM,CAACkC,SAAS,CAACW,aAAa,CAAC,4BAA4B,CAAC,CAAC,CAACC,iBAAiB,CAAC,CAAC;IACrF,CAAC,CAAC;IACF9C,MAAM,CAACkC,SAAS,CAACW,aAAa,CAAC,KAAK,CAAC,CAAC,CAACE,WAAW,CAAC;MAC/CC,QAAQ,EAAE,MAAM;MAChBC,OAAO,EAAE;IACb,CAAC,CAAC;IACFjD,MAAM,CAACkC,SAAS,CAACgB,UAAU,CAAC,CAACH,WAAW,CAAC;MAAEI,eAAe,EAAE;IAAkB,CAAC,CAAC;IAChFnD,MAAM,CAACkC,SAAS,CAACW,aAAa,CAAC,4BAA4B,CAAC,CAAC,CAACC,iBAAiB,CAAC,CAAC;IACjF9C,MAAM,CAACkC,SAAS,CAACW,aAAa,CAAC,oCAAoC,CAAC,CAAC,CAACC,iBAAiB,CAAC,CAAC;EAC7F,CAAC,CAAC;EAEF7C,EAAE,CAAC,wDAAwD,EAAE,MAAM;IAC/D,MAAMmD,YAAY,GAAGlD,EAAE,CAACyB,EAAE,CAAC,CAAC;IAE5BhC,MAAM,cACFG,KAAA,CAAAU,aAAA,CAACJ,eAAe;MACZ+B,IAAI,EAAC,qBAAqB;MAC1BE,QAAQ,EAAC,YAAY;MACrBe,YAAY,EAAEA,YAAa;MAC3Bb,KAAK,EAAEpC,oBAAoB,CAACqC;IAAK,CACpC,CACL,CAAC;IAED9C,SAAS,CAAC+C,KAAK,CAAC7C,MAAM,CAAC8C,SAAS,CAAC,QAAQ,EAAE;MAAEC,IAAI,EAAE;IAAgB,CAAC,CAAC,CAAC;IAEtE3C,MAAM,CAACoD,YAAY,CAAC,CAACR,oBAAoB,CAAC,qBAAqB,CAAC;EACpE,CAAC,CAAC;EAEF3C,EAAE,CAAC,iDAAiD,EAAE,YAAY;IAC9D,MAAM;MAAEiC;IAAU,CAAC,GAAGvC,MAAM,cACxBG,KAAA,CAAAU,aAAA,CAACJ,eAAe;MACZ+B,IAAI,EAAC,4BAA4B;MACjCE,QAAQ,EAAC,YAAY;MACrBgB,gBAAgB;MAChBd,KAAK,EAAEpC,oBAAoB,CAACmD;IAAM,CACrC,CACL,CAAC;IAED,MAAMzD,OAAO,CAAC,MAAM;MAChBG,MAAM,CAACkC,SAAS,CAACW,aAAa,CAAC,KAAK,CAAC,CAAC,CAACU,iBAAiB,CACpD,iCACJ,CAAC;IACL,CAAC,CAAC;IACFvD,MAAM,CAACkC,SAAS,CAACW,aAAa,CAAC,UAAU,CAAC,CAAC,CAACC,iBAAiB,CAAC,CAAC;IAC/D9C,MAAM,CAACkC,SAAS,CAACgB,UAAU,CAAC,CAACH,WAAW,CAAC;MAAEI,eAAe,EAAE;IAAqB,CAAC,CAAC;EACvF,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}

package/lib/esm/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js

@@ -9,6 +9,7 @@ import { useStickyActionState } from './useStickyActionState';
 const COPY_FEEDBACK_DURATION = 1500;
 const CopyToClipboard = ({
   copyButtonText,
+  onInsertCode,
   rootRef,
   text,
   theme
@@ -26,6 +27,9 @@ const CopyToClipboard = ({
   const shareText = useTextstringValue({
     textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.share)
   });
+  const insertCodeText = useTextstringValue({
+    textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.insertCode)
+  });
   const copyText = copyButtonText ?? defaultCopyText;
   const iconColor = theme === CodeHighlighterTheme.Dark ? '#f4f6f8' : '#5f6368';
   useEffect(() => () => {
@@ -61,6 +65,7 @@ const CopyToClipboard = ({
     onClick: () => {
       void handleCopy();
     },
+    title: copyText,
     type: "button"
   }, /*#__PURE__*/React.createElement(Icon, {
     color: iconColor,
@@ -74,11 +79,24 @@ const CopyToClipboard = ({
     $codeTheme: theme,
     $isSticky: isActionGroupSticky,
     "aria-label": shareText,
+    title: shareText,
     type: "button"
   }, /*#__PURE__*/React.createElement(Icon, {
     color: iconColor,
     icons: ['fa fa-share-nodes']
-  })))));
+  }))), typeof onInsertCode === 'function' && /*#__PURE__*/React.createElement(StyledCopyToClipboardButton, {
+    $codeTheme: theme,
+    $isSticky: isActionGroupSticky,
+    "aria-label": insertCodeText,
+    onClick: () => {
+      onInsertCode(text);
+    },
+    title: insertCodeText,
+    type: "button"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    color: iconColor,
+    icons: ['fa fa-arrow-right']
+  }))));
 };
 CopyToClipboard.displayName = 'CopyToClipboard';
 export default CopyToClipboard;

package/lib/esm/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipboard.js","names":["Icon","SharingContextMenu","ttsToITextString","useTextstringValue","createDialog","DialogType","ToastType","React","useCallback","useEffect","useRef","useState","CodeHighlighterTheme","StyledCopyToClipboard","StyledCopyToClipboardActionGroup","StyledCopyToClipboardButton","textStrings","useStickyActionState","COPY_FEEDBACK_DURATION","CopyToClipboard","copyButtonText","rootRef","text","theme","actionGroupRef","copyFeedbackTimeoutRef","isActionGroupSticky","hasCopied","setHasCopied","defaultCopyText","textstring","components","codeHighlighter","copyToClipboard","copy","copyFailedText","copyFailed","shareText","share","copyText","iconColor","Dark","window","clearTimeout","current","showCopyFeedback","setTimeout","handleCopy","navigator","clipboard","writeText","showCloseIcon","toastType","ERROR","type","TOAST","open","createElement","$codeTheme","ref","$isSticky","onClick","color","icons","link","shouldShowCallingCodeAction","shouldShowCopyAction","shouldUseDefaultTriggerStyles","displayName"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.tsx"],"sourcesContent":["import { Icon, SharingContextMenu } from '@chayns-components/core';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport { createDialog, DialogType, ToastType } from 'chayns-api';\nimport React, { FC, RefObject, useCallback, useEffect, useRef, useState } from 'react';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\nimport {\n    StyledCopyToClipboard,\n    StyledCopyToClipboardActionGroup,\n    StyledCopyToClipboardButton,\n} from './CopyToClipboard.styles';\nimport textStrings from '../../../constants/textStrings';\nimport { useStickyActionState } from './useStickyActionState';\n\nexport type CopyToClipboardProps = {\n    copyButtonText?: string;\n    rootRef: RefObject<HTMLDivElement>;\n    text: string;\n    theme: CodeHighlighterTheme;\n};\n\nconst COPY_FEEDBACK_DURATION = 1500;\n\nconst CopyToClipboard: FC<CopyToClipboardProps> = ({ copyButtonText, rootRef, text, theme }) => {\n    const actionGroupRef = useRef<HTMLDivElement>(null);\n    const copyFeedbackTimeoutRef = useRef<number>();\n    const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\n    const [hasCopied, setHasCopied] = useState(false);\n\n    const defaultCopyText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copy),\n    });\n    const copyFailedText = useTextstringValue({\n        textstring: ttsToITextString(\n            textStrings.components.codeHighlighter.copyToClipboard.copyFailed,\n        ),\n    });\n    const shareText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.share),\n    });\n\n    const copyText = copyButtonText ?? defaultCopyText;\n    const iconColor = theme === CodeHighlighterTheme.Dark ? '#f4f6f8' : '#5f6368';\n\n    useEffect(\n        () => () => {\n            window.clearTimeout(copyFeedbackTimeoutRef.current);\n        },\n        [],\n    );\n\n    const showCopyFeedback = useCallback(() => {\n        window.clearTimeout(copyFeedbackTimeoutRef.current);\n        setHasCopied(true);\n\n        copyFeedbackTimeoutRef.current = window.setTimeout(() => {\n            setHasCopied(false);\n        }, COPY_FEEDBACK_DURATION);\n    }, []);\n\n    const handleCopy = useCallback(async () => {\n        try {\n            await navigator.clipboard.writeText(text);\n            showCopyFeedback();\n        } catch {\n            void createDialog({\n                showCloseIcon: true,\n                text: copyFailedText,\n                toastType: ToastType.ERROR,\n                type: DialogType.TOAST,\n            }).open();\n        }\n    }, [copyFailedText, showCopyFeedback, text]);\n\n    return (\n        <StyledCopyToClipboard $codeTheme={theme} ref={actionGroupRef}>\n            <StyledCopyToClipboardActionGroup>\n                <StyledCopyToClipboardButton\n                    $codeTheme={theme}\n                    $isSticky={isActionGroupSticky}\n                    aria-label={copyText}\n                    onClick={() => {\n                        void handleCopy();\n                    }}\n                    type=\"button\"\n                >\n                    <Icon\n                        color={iconColor}\n                        icons={hasCopied ? ['fa fa-check'] : ['fa-light fa-copy']}\n                    />\n                </StyledCopyToClipboardButton>\n                <SharingContextMenu\n                    link={text}\n                    shouldShowCallingCodeAction={false}\n                    shouldShowCopyAction={false}\n                    shouldUseDefaultTriggerStyles={false}\n                >\n                    <StyledCopyToClipboardButton\n                        $codeTheme={theme}\n                        $isSticky={isActionGroupSticky}\n                        aria-label={shareText}\n                        type=\"button\"\n                    >\n                        <Icon color={iconColor} icons={['fa fa-share-nodes']} />\n                    </StyledCopyToClipboardButton>\n                </SharingContextMenu>\n            </StyledCopyToClipboardActionGroup>\n        </StyledCopyToClipboard>\n    );\n};\n\nCopyToClipboard.displayName = 'CopyToClipboard';\n\nexport default CopyToClipboard;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CopyToClipboard.js","names":["Icon","SharingContextMenu","ttsToITextString","useTextstringValue","createDialog","DialogType","ToastType","React","useCallback","useEffect","useRef","useState","CodeHighlighterTheme","StyledCopyToClipboard","StyledCopyToClipboardActionGroup","StyledCopyToClipboardButton","textStrings","useStickyActionState","COPY_FEEDBACK_DURATION","CopyToClipboard","copyButtonText","onInsertCode","rootRef","text","theme","actionGroupRef","copyFeedbackTimeoutRef","isActionGroupSticky","hasCopied","setHasCopied","defaultCopyText","textstring","components","codeHighlighter","copyToClipboard","copy","copyFailedText","copyFailed","shareText","share","insertCodeText","insertCode","copyText","iconColor","Dark","window","clearTimeout","current","showCopyFeedback","setTimeout","handleCopy","navigator","clipboard","writeText","showCloseIcon","toastType","ERROR","type","TOAST","open","createElement","$codeTheme","ref","$isSticky","onClick","title","color","icons","link","shouldShowCallingCodeAction","shouldShowCopyAction","shouldUseDefaultTriggerStyles","displayName"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.tsx"],"sourcesContent":["import { Icon, SharingContextMenu } from '@chayns-components/core';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport { createDialog, DialogType, ToastType } from 'chayns-api';\nimport React, { FC, RefObject, useCallback, useEffect, useRef, useState } from 'react';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\nimport {\n    StyledCopyToClipboard,\n    StyledCopyToClipboardActionGroup,\n    StyledCopyToClipboardButton,\n} from './CopyToClipboard.styles';\nimport textStrings from '../../../constants/textStrings';\nimport { useStickyActionState } from './useStickyActionState';\n\nexport type CopyToClipboardProps = {\n    copyButtonText?: string;\n    onInsertCode?: (code: string) => void;\n    rootRef: RefObject<HTMLDivElement>;\n    text: string;\n    theme: CodeHighlighterTheme;\n};\n\nconst COPY_FEEDBACK_DURATION = 1500;\n\nconst CopyToClipboard: FC<CopyToClipboardProps> = ({\n    copyButtonText,\n    onInsertCode,\n    rootRef,\n    text,\n    theme,\n}) => {\n    const actionGroupRef = useRef<HTMLDivElement>(null);\n    const copyFeedbackTimeoutRef = useRef<number>();\n    const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\n    const [hasCopied, setHasCopied] = useState(false);\n\n    const defaultCopyText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copy),\n    });\n    const copyFailedText = useTextstringValue({\n        textstring: ttsToITextString(\n            textStrings.components.codeHighlighter.copyToClipboard.copyFailed,\n        ),\n    });\n    const shareText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.share),\n    });\n    const insertCodeText = useTextstringValue({\n        textstring: ttsToITextString(\n            textStrings.components.codeHighlighter.copyToClipboard.insertCode,\n        ),\n    });\n\n    const copyText = copyButtonText ?? defaultCopyText;\n    const iconColor = theme === CodeHighlighterTheme.Dark ? '#f4f6f8' : '#5f6368';\n\n    useEffect(\n        () => () => {\n            window.clearTimeout(copyFeedbackTimeoutRef.current);\n        },\n        [],\n    );\n\n    const showCopyFeedback = useCallback(() => {\n        window.clearTimeout(copyFeedbackTimeoutRef.current);\n        setHasCopied(true);\n\n        copyFeedbackTimeoutRef.current = window.setTimeout(() => {\n            setHasCopied(false);\n        }, COPY_FEEDBACK_DURATION);\n    }, []);\n\n    const handleCopy = useCallback(async () => {\n        try {\n            await navigator.clipboard.writeText(text);\n            showCopyFeedback();\n        } catch {\n            void createDialog({\n                showCloseIcon: true,\n                text: copyFailedText,\n                toastType: ToastType.ERROR,\n                type: DialogType.TOAST,\n            }).open();\n        }\n    }, [copyFailedText, showCopyFeedback, text]);\n\n    return (\n        <StyledCopyToClipboard $codeTheme={theme} ref={actionGroupRef}>\n            <StyledCopyToClipboardActionGroup>\n                <StyledCopyToClipboardButton\n                    $codeTheme={theme}\n                    $isSticky={isActionGroupSticky}\n                    aria-label={copyText}\n                    onClick={() => {\n                        void handleCopy();\n                    }}\n                    title={copyText}\n                    type=\"button\"\n                >\n                    <Icon\n                        color={iconColor}\n                        icons={hasCopied ? ['fa fa-check'] : ['fa-light fa-copy']}\n                    />\n                </StyledCopyToClipboardButton>\n                <SharingContextMenu\n                    link={text}\n                    shouldShowCallingCodeAction={false}\n                    shouldShowCopyAction={false}\n                    shouldUseDefaultTriggerStyles={false}\n                >\n                    <StyledCopyToClipboardButton\n                        $codeTheme={theme}\n                        $isSticky={isActionGroupSticky}\n                        aria-label={shareText}\n                        title={shareText}\n                        type=\"button\"\n                    >\n                        <Icon color={iconColor} icons={['fa fa-share-nodes']} />\n                    </StyledCopyToClipboardButton>\n                </SharingContextMenu>\n                {typeof onInsertCode === 'function' && (\n                    <StyledCopyToClipboardButton\n                        $codeTheme={theme}\n                        $isSticky={isActionGroupSticky}\n                        aria-label={insertCodeText}\n                        onClick={() => {\n                            onInsertCode(text);\n                        }}\n                        title={insertCodeText}\n                        type=\"button\"\n                    >\n                        <Icon color={iconColor} icons={['fa fa-arrow-right']} />\n                    </StyledCopyToClipboardButton>\n                )}\n            </StyledCopyToClipboardActionGroup>\n        </StyledCopyToClipboard>\n    );\n};\n\nCopyToClipboard.displayName = 'CopyToClipboard';\n\nexport default CopyToClipboard;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/constants/textStrings.js

@@ -10,6 +10,10 @@ export default {
           stringName: 'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copyFailed',
           fallback: 'Kopieren fehlgeschlagen'
         },
+        insertCode: {
+          stringName: 'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_insertCode',
+          fallback: 'Code einfügen'
+        },
         share: {
           stringName: 'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_share',
           fallback: 'Teilen'

package/lib/esm/constants/textStrings.js.map

@@ -1 +1 @@
-{"version":3,"file":"textStrings.js","names":["components","codeHighlighter","copyToClipboard","copy","stringName","fallback","copyFailed","share"],"sources":["../../../src/constants/textStrings.ts"],"sourcesContent":["export default {\n    components: {\n        codeHighlighter: {\n            copyToClipboard: {\n                copy: {\n                    stringName:\n                        'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copy',\n                    fallback: 'Kopieren',\n                },\n                copyFailed: {\n                    stringName:\n                        'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copyFailed',\n                    fallback: 'Kopieren fehlgeschlagen',\n                },\n                share: {\n                    stringName:\n                        'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_share',\n                    fallback: 'Teilen',\n                },\n            },\n        },\n    },\n} as const;\n"],"mappings":"AAAA,eAAe;EACXA,UAAU,EAAE;IACRC,eAAe,EAAE;MACbC,eAAe,EAAE;QACbC,IAAI,EAAE;UACFC,UAAU,EACN,wFAAwF;UAC5FC,QAAQ,EAAE;QACd,CAAC;QACDC,UAAU,EAAE;UACRF,UAAU,EACN,8FAA8F;UAClGC,QAAQ,EAAE;QACd,CAAC;QACDE,KAAK,EAAE;UACHH,UAAU,EACN,yFAAyF;UAC7FC,QAAQ,EAAE;QACd;MACJ;IACJ;EACJ;AACJ,CAAC","ignoreList":[]}
+{"version":3,"file":"textStrings.js","names":["components","codeHighlighter","copyToClipboard","copy","stringName","fallback","copyFailed","insertCode","share"],"sources":["../../../src/constants/textStrings.ts"],"sourcesContent":["export default {\n    components: {\n        codeHighlighter: {\n            copyToClipboard: {\n                copy: {\n                    stringName:\n                        'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copy',\n                    fallback: 'Kopieren',\n                },\n                copyFailed: {\n                    stringName:\n                        'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copyFailed',\n                    fallback: 'Kopieren fehlgeschlagen',\n                },\n                insertCode: {\n                    stringName:\n                        'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_insertCode',\n                    fallback: 'Code einfügen',\n                },\n                share: {\n                    stringName:\n                        'txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_share',\n                    fallback: 'Teilen',\n                },\n            },\n        },\n    },\n} as const;\n"],"mappings":"AAAA,eAAe;EACXA,UAAU,EAAE;IACRC,eAAe,EAAE;MACbC,eAAe,EAAE;QACbC,IAAI,EAAE;UACFC,UAAU,EACN,wFAAwF;UAC5FC,QAAQ,EAAE;QACd,CAAC;QACDC,UAAU,EAAE;UACRF,UAAU,EACN,8FAA8F;UAClGC,QAAQ,EAAE;QACd,CAAC;QACDE,UAAU,EAAE;UACRH,UAAU,EACN,8FAA8F;UAClGC,QAAQ,EAAE;QACd,CAAC;QACDG,KAAK,EAAE;UACHJ,UAAU,EACN,yFAAyF;UAC7FC,QAAQ,EAAE;QACd;MACJ;IACJ;EACJ;AACJ,CAAC","ignoreList":[]}

package/lib/types/components/code-highlighter/CodeHighlighter.d.ts

@@ -23,6 +23,10 @@ export type CodeHighlighterProps = {
      * Function to be executed when the formatting of the code fails.
      */
     onFormatError?: (error: unknown) => void;
+    /**
+     * Function to be executed when the code should be inserted into another target.
+     */
+    onInsertCode?: (code: string) => void;
     /**
      * Whether the code should be formatted with prettier.
      */

package/lib/types/components/code-highlighter/copy-to-clipboard/CopyToClipboard.d.ts

@@ -2,6 +2,7 @@ import { FC, RefObject } from 'react';
 import { CodeHighlighterTheme } from '../../../types/codeHighlighter';
 export type CopyToClipboardProps = {
     copyButtonText?: string;
+    onInsertCode?: (code: string) => void;
     rootRef: RefObject<HTMLDivElement>;
     text: string;
     theme: CodeHighlighterTheme;

package/lib/types/constants/textStrings.d.ts

@@ -10,6 +10,10 @@ declare const _default: {
                     readonly stringName: "txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_copyFailed";
                     readonly fallback: "Kopieren fehlgeschlagen";
                 };
+                readonly insertCode: {
+                    readonly stringName: "txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_insertCode";
+                    readonly fallback: "Code einfügen";
+                };
                 readonly share: {
                     readonly stringName: "txt_chayns_components_code_highlighter_components_codeHighlighter_copyToClipboard_share";
                     readonly fallback: "Teilen";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/code-highlighter",
-    "version": "5.5.26",
+    "version": "5.5.28",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -73,8 +73,8 @@
         "vitest": "^1.6.1"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.5.26",
-        "@chayns-components/textstring": "^5.5.24",
+        "@chayns-components/core": "^5.5.28",
+        "@chayns-components/textstring": "^5.5.28",
         "@types/react-syntax-highlighter": "^15.5.13",
         "babel-prettier-parser": "^0.10.8",
         "prettier": "^2.8.8",
@@ -91,5 +91,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "92d9195193d59f3180f001b3545b34167476d6a7"
+    "gitHead": "20b5354c0ee43c56e9919589f6b3bad7cf6b14bb"
 }