npm - @instructure/ui-source-code-editor - Versions diffs - 11.0.1-snapshot-1 → 11.0.1-snapshot-3 - Mend

@instructure/ui-source-code-editor 11.0.1-snapshot-1 → 11.0.1-snapshot-3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/CHANGELOG.md +1 -1
package/package.json +13 -13
package/src/SourceCodeEditor/README.md +63 -752
package/tsconfig.build.tsbuildinfo +1 -1

package/src/SourceCodeEditor/README.md CHANGED Viewed

@@ -38,200 +38,10 @@ Setting the correct language adds **syntax highlighting** and other helpful feat
 **Note:** In case you need support for additional languages, please contact us on [GitHub](https://github.com/instructure/instructure-ui)!
-- ```js
-  const languages = {
-    json: `{
-    "name": "@instructure/ui-source-code-editor",
-    "version": "8.24.2",
-    "description": "A UI component library made by Instructure Inc.",
-    "author": "Instructure, Inc. Engineering and Product Design",
-    "module": "./es/index.js",
-    "main": "./lib/index.js",
-    "types": "./types/index.d.ts",
-    "repository": {
-      "type": "git",
-      "url": "https://github.com/instructure/instructure-ui.git"
-    },
-  }`,
-    javascript: `const fruit: string = "apple"
-  const re = new RegExp('ab+c')
-  function exampleMethod(props: Props) {
-    return props ? props.value : null
-  }
-  /**
-   * This is an example
-   * @param {Object} props
-   */
-  const Example = () => {
-    return (
-      <View as="div" padding={'large'}>
-        <Position
-          renderTarget={<GoodComponent />}
-          placement='end center'
-          offsetX='20px'
-        >
-          <span style={{ padding: '8px', background: 'white' }}>
-            Positioned content
-          </span>
-        </Position>
-      </View>
-    )
-  }
-  render(<Example />)`,
-    html: `<!DOCTYPE html>
-  <html lang="en">
-    <head>
-      <meta charset="UTF-8" />
-      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <title>Example app</title>
-    </head>
-    <body>
-      <div id="app">
-        <button onclick="myFunction()">Click me</button>
-      </div>
-      <script src="script.js"></script>
-    </body>
-  </html>`,
-    css: `a {
-    text-decoration: none;
-    &:hover { text-decoration: underline; }
-  }
-  a:link, a:visited, a:hover, a:active {
-    background-color: green;
-    color: white;
-    padding: 10px 25px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-  }
-  .centertext { text-align: center; }
-  img { opacity: 0.5; filter: alpha(opacity=50); }`,
-    markdown: `#### The quarterly results look great!
-  > - Revenue was off the chart.
-  > - Profits were higher than ever.
-  *Everything* is going according to **plan**.
-  ---
-  type: example
-  ---`,
-    shell: `#!/bin/bash
-  # example of using arguments to a script
-  echo "My first name is $1"
-  echo "My surname is $2"
-  echo "Total number of arguments is $#"
-  ________________________________________
-  $ chmod a+x name.sh
-  $ ./name.sh Hans-Wolfgang Loidl
-  My first name is Hans-Wolfgang
-  My surname is Loidl
-  Total number of arguments is 2`,
-    yml: `---
-  doe: "a deer, a female deer"
-  ray: "a drop of golden sun"
-  pi: 3.14159
-  xmas: true
-  french-hens: 3
-  calling-birds:
-    - huey
-    - dewey
-    - louie
-    - fred
-  xmas-fifth-day:
-    calling-birds: four
-    french-hens: 3
-    golden-rings: 5
-    partridges:
-      count: 1
-      location: "a pear tree"
-    turtle-doves: two`
-  }
-  const languageMap = {
-    json: languages.json,
-    js: languages.javascript,
-    jsx: languages.javascript,
-    javascript: languages.javascript,
-    html: languages.html,
-    css: languages.css,
-    markdown: languages.markdown,
-    sh: languages.shell,
-    shell: languages.shell,
-    bash: languages.shell,
-    yml: languages.yml,
-    yaml: languages.yml
-  }
-  class LanguageExamples extends React.Component {
-    state = {
-      currentLanguage: 'javascript',
-      currentValue: languageMap.javascript
-    }
-    render() {
-      const languageKeys = Object.keys(languageMap)
-      return (
-        <Flex alignItems="start">
-          <Flex.Item>
-            <RadioInputGroup
-              name="languageOptions"
-              value={this.state.currentLanguage}
-              description="Language"
-              onChange={(e, currentLanguage) => {
-                this.setState({
-                  currentLanguage,
-                  currentValue: languageMap[currentLanguage]
-                })
-              }}
-            >
-              {languageKeys.map((language) => (
-                <RadioInput key={language} label={language} value={language} />
-              ))}
-            </RadioInputGroup>
-          </Flex.Item>
-          <Flex.Item padding="0 0 0 large" shouldGrow shouldShrink>
-            <FormField label="SourceCodeEditor with syntax highlight">
-              <SourceCodeEditor
-                label={`${this.state.currentLanguage} code editor`}
-                language={this.state.currentLanguage}
-                value={this.state.currentValue}
-                onChange={(value) => {
-                  this.setState({
-                    currentValue: value
-                  })
-                }}
-                lineNumbers
-                lineWrapping
-                highlightActiveLine
-                highlightActiveLineGutter
-              />
-            </FormField>
-          </Flex.Item>
-        </Flex>
-      )
-    }
-  }
-  render(<LanguageExamples />)
-  ```
-- ```js
+```js
+---
+type: example
+---
   const languages = {
     json: `{
       "name": "@instructure/ui-source-code-editor",
@@ -247,13 +57,13 @@ Setting the correct language adds **syntax highlighting** and other helpful feat
       },
     }`,
     javascript: `const fruit: string = "apple"
   const re = new RegExp('ab+c')
   function exampleMethod(props: Props) {
     return props ? props.value : null
   }
   /**
    * This is an example
    * @param {Object} props
@@ -273,7 +83,7 @@ Setting the correct language adds **syntax highlighting** and other helpful feat
       </View>
     )
   }
   render(<Example />)`,
     html: `<!DOCTYPE html>
@@ -288,16 +98,16 @@ Setting the correct language adds **syntax highlighting** and other helpful feat
         <div id="app">
           <button onclick="myFunction()">Click me</button>
         </div>
         <script src="script.js"></script>
       </body>
     </html>`,
     css: `a {
       text-decoration: none;
       &:hover { text-decoration: underline; }
     }
     a:link, a:visited, a:hover, a:active {
       background-color: green;
       color: white;
@@ -306,29 +116,29 @@ Setting the correct language adds **syntax highlighting** and other helpful feat
       text-decoration: none;
       display: inline-block;
     }
     .centertext { text-align: center; }
     img { opacity: 0.5; filter: alpha(opacity=50); }`,
     markdown: `#### The quarterly results look great!
     > - Revenue was off the chart.
     > - Profits were higher than ever.
     *Everything* is going according to **plan**.
     ---
     type: example
     ---`,
     shell: `#!/bin/bash
     # example of using arguments to a script
     echo "My first name is $1"
     echo "My surname is $2"
     echo "Total number of arguments is $#"
     ________________________________________
     $ chmod a+x name.sh
     $ ./name.sh Hans-Wolfgang Loidl
     My first name is Hans-Wolfgang
@@ -415,7 +225,7 @@ Setting the correct language adds **syntax highlighting** and other helpful feat
   }
   render(<LanguageExamples />)
-  ```
+```
 ### Controlled mode
@@ -423,85 +233,13 @@ SourceCodeEditor works best as an uncontrolled component (with the `defaultValue
 We've implemented the "controlled" usage, but please let us know if you run into any performance issues or bugs.
-- ```js
-  class ControlledExample extends React.Component {
-    state = {
-      value: `const fruit: string = "apple"
-  function exampleMethod(props: Props) {
-    return props ? props.value : null
-  }`
-    }
-    textAreaRef = null
-    render() {
-      return (
-        <View display="block" background="primary">
-          <Flex alignItems="start">
-            <Flex.Item shouldGrow shouldShrink padding="0 large 0 0">
-              <FormField
-                label="Controlled code editor"
-                id="controlledCodeEditor"
-                messages={[
-                  {
-                    type: 'hint',
-                    text: 'Type in the editor or set the value from the textarea.'
-                  }
-                ]}
-              >
-                <SourceCodeEditor
-                  label="controlled code editor"
-                  value={this.state.value}
-                  onChange={(value) => {
-                    this.setState({ value })
-                  }}
-                  highlightActiveLine
-                  highlightActiveLineGutter
-                  lineWrapping
-                  lineNumbers
-                  foldGutter
-                  spellcheck
-                />
-              </FormField>
-            </Flex.Item>
-            <Flex.Item size="50%" padding="0 0 0 large">
-              <FormFieldGroup
-                description="Set value from the outside"
-                name="setValue"
-              >
-                <TextArea
-                  label={
-                    <ScreenReaderContent>Change value</ScreenReaderContent>
-                  }
-                  textareaRef={(e) => {
-                    this.textAreaRef = e
-                  }}
-                  defaultValue={this.state.value}
-                />
-                <Button
-                  color="primary"
-                  onClick={() => {
-                    this.setState({ value: this.textAreaRef.value })
-                  }}
-                >
-                  Update value
-                </Button>
-              </FormFieldGroup>
-            </Flex.Item>
-          </Flex>
-        </View>
-      )
-    }
-  }
-  render(<ControlledExample />)
-  ```
-- ```js
+```js
+---
+type: example
+---
   const ControlledExample = () => {
     const [value, setValue] = useState(`const fruit: string = "apple"
   function exampleMethod(props: Props) {
     return props ? props.value : null
   }`)
@@ -564,7 +302,7 @@ We've implemented the "controlled" usage, but please let us know if you run into
     )
   }
   render(<ControlledExample />)
-  ```
+```
 ### Editable and readOnly
@@ -573,53 +311,10 @@ The editability of the content can be set with the combination of the `editable`
 The `readOnly` prop works like a "preventDefault" and disables any interaction by the user or API calls (e.g. copy-paste).
 If the `editable` prop is set to `false`, the editor is also not focusable, and the `contenteditable="false"` is set on the content.
-- ```js
-  class EditableExample extends React.Component {
-    state = {
-      editable: true,
-      readOnly: false
-    }
-    render() {
-      return (
-        <View
-          display="block"
-          padding="medium medium small"
-          background="primary"
-        >
-          <View display="block" margin="small none large">
-            <FormFieldGroup description="Settings" rowSpacing="small">
-              {['editable', 'readOnly'].map((prop) => (
-                <Checkbox
-                  label={prop}
-                  key={prop}
-                  defaultChecked={this.state[prop]}
-                  onChange={() => {
-                    this.setState({ [prop]: !this.state[prop] })
-                  }}
-                />
-              ))}
-            </FormFieldGroup>
-          </View>
-          <SourceCodeEditor
-            label="editable code editor"
-            language="jsx"
-            editable={this.state.editable}
-            readOnly={this.state.readOnly}
-            defaultValue={`function example() {
-    console.log('example')
-  }`}
-          />
-        </View>
-      )
-    }
-  }
-  render(<EditableExample />)
-  ```
-- ```js
+```js
+---
+type: example
+---
   const EditableExample = () => {
     const [settings, setSettings] = useState({
       editable: true,
@@ -659,7 +354,7 @@ If the `editable` prop is set to `false`, the editor is also not focusable, and
     )
   }
   render(<EditableExample />)
-  ```
+```
 ### Gutter settings
@@ -667,86 +362,10 @@ The `lineNumbers` prop displays the line numbers in the side gutter, and the `fo
 If any of these two props are active, the gutter is displayed, and the `highlightActiveLineGutter` highlights the active line in the gutter. (The `highlightActiveLine` prop highlights the line itself.)
-- ```js
-  class GutterExample extends React.Component {
-    state = {
-      lineNumbers: true,
-      foldGutter: true,
-      highlightActiveLineGutter: true,
-      highlightActiveLine: true
-    }
-    render() {
-      return (
-        <View
-          display="block"
-          padding="medium medium small"
-          background="primary"
-        >
-          <View display="block" margin="small none large">
-            <FormFieldGroup description="Settings" rowSpacing="small">
-              {[
-                'lineNumbers',
-                'foldGutter',
-                'highlightActiveLineGutter',
-                'highlightActiveLine'
-              ].map((prop) => (
-                <Checkbox
-                  label={prop}
-                  key={prop}
-                  defaultChecked={this.state[prop]}
-                  onChange={() => {
-                    this.setState({ [prop]: !this.state[prop] })
-                  }}
-                />
-              ))}
-            </FormFieldGroup>
-          </View>
-          <SourceCodeEditor
-            label="gutter example"
-            language="jsx"
-            lineNumbers={this.state.lineNumbers}
-            foldGutter={this.state.foldGutter}
-            highlightActiveLineGutter={this.state.highlightActiveLineGutter}
-            highlightActiveLine={this.state.highlightActiveLine}
-            defaultValue={`const fruit: string = "apple"
-  function exampleMethod(props: Props) {
-  return props ? props.value : null
-  }
-  /**
-  * This is an example
-  * @param {Object} props
-  */
-  const Example = () => {
-  return (
-    <View as="div" padding={'large'}>
-      <Position
-        renderTarget={<GoodComponent />}
-        placement='end center'
-        offsetX='20px'
-      >
-        <span style={{ padding: '8px', background: 'white' }}>
-          Positioned content
-        </span>
-      </Position>
-    </View>
-  )
-  }
-  render(<Example />)`}
-          />
-        </View>
-      )
-    }
-  }
-  render(<GutterExample />)
-  ```
-- ```js
+```js
+---
+type: example
+---
   const GutterExample = () => {
     const [settings, setSettings] = useState({
       lineNumbers: true,
@@ -788,11 +407,11 @@ If any of these two props are active, the gutter is displayed, and the `highligh
           highlightActiveLineGutter={settings.highlightActiveLineGutter}
           highlightActiveLine={settings.highlightActiveLine}
           defaultValue={`const fruit: string = "apple"
   function exampleMethod(props: Props) {
   return props ? props.value : null
   }
   /**
   * This is an example
   * @param {Object} props
@@ -812,14 +431,14 @@ If any of these two props are active, the gutter is displayed, and the `highligh
     </View>
   )
   }
   render(<Example />)`}
         />
       </View>
     )
   }
   render(<GutterExample />)
-  ```
+```
 ### Indentation
@@ -843,118 +462,10 @@ The `indentUnitCount` prop should be a string consisting either entirely of spac
 Another useful feature is the `indentAll` public method on the `SourceCodeEditor` component that can be called anytime to trigger a re-indent on the content.
-- ```js
-  class IndentExample extends React.Component {
-    state = {
-      indentWithTab: true,
-      indentUnitCount: '2'
-    }
-    editor = null
-    get indentUnit() {
-      return Array(parseInt(this.state.indentUnitCount)).fill(' ').join('')
-    }
-    reIndent() {
-      this.editor.indentAll()
-    }
-    indentCurrentSelection() {
-      this.editor.indentCurrentSelection()
-    }
-    render() {
-      return (
-        <View
-          display="block"
-          padding="medium medium small"
-          background="primary"
-        >
-          <View display="block" margin="small none large">
-            <FormFieldGroup description="Settings">
-              <Checkbox
-                label="indentWithTab"
-                defaultChecked={this.state.indentWithTab}
-                onChange={() => {
-                  this.setState({ indentWithTab: !this.state.indentWithTab })
-                }}
-              />
-              <RadioInputGroup
-                name="indentUnitCount"
-                value={this.state.indentUnitCount}
-                description="indent space count"
-                onChange={(e, indentUnitCount) => {
-                  this.setState({ indentUnitCount })
-                  this.reIndent()
-                }}
-              >
-                {['2', '4', '8'].map((count) => (
-                  <RadioInput key={count} label={count} value={count} />
-                ))}
-              </RadioInputGroup>
-              <Button
-                onClick={() => {
-                  this.reIndent()
-                }}
-              >
-                Re-indent code
-              </Button>
-              <Button
-                onClick={() => {
-                  this.indentCurrentSelection()
-                }}
-              >
-                Indent current selection
-              </Button>
-            </FormFieldGroup>
-          </View>
-          <SourceCodeEditor
-            label="indent example"
-            ref={(component) => {
-              this.editor = component
-            }}
-            language="jsx"
-            indentWithTab={this.state.indentWithTab}
-            indentUnit={this.indentUnit}
-            defaultValue={`const fruit: string = "apple"
-  function exampleMethod(props: Props) {
-    return props ? props.value : null
-  }
-  /**
-  * This is an example
-  * @param {Object} props
-  */
-  const Example = () => {
-    return (
-      <View as="div" padding={'large'}>
-        <Position
-          renderTarget={<GoodComponent />}
-          placement='end center'
-          offsetX='20px'
-        >
-          <span style={{ padding: '8px', background: 'white' }}>
-            Positioned content
-          </span>
-        </Position>
-      </View>
-    )
-  }
-  render(<Example />)`}
-          />
-        </View>
-      )
-    }
-  }
-  render(<IndentExample />)
-  ```
-- ```js
+```js
+---
+type: example
+---
   const IndentExample = () => {
     const [indentWithTab, setIndentWithTab] = useState(true)
     const [indentUnitCount, setIndentUnitCount] = useState('2')
@@ -1011,11 +522,11 @@ Another useful feature is the `indentAll` public method on the `SourceCodeEditor
           indentWithTab={indentWithTab}
           indentUnit={indentUnit}
           defaultValue={`const fruit: string = "apple"
   function exampleMethod(props: Props) {
     return props ? props.value : null
   }
   /**
   * This is an example
   * @param {Object} props
@@ -1035,7 +546,7 @@ Another useful feature is the `indentAll` public method on the `SourceCodeEditor
       </View>
     )
   }
   render(<Example />)`}
         />
       </View>
@@ -1043,7 +554,7 @@ Another useful feature is the `indentAll` public method on the `SourceCodeEditor
   }
   render(<IndentExample />)
-  ```
+```
 ### Direction
@@ -1051,93 +562,10 @@ SourceCodeEditor is a bidirectional component. It will inherit the text-directio
 The `rtlMoveVisually` prop controls the cursor movement in RTL mode, whether it should be **visual** (pressing the left arrow moves the cursor left) or **logical** (pressing the left arrow moves to the next lower index in the string, which is visually right in RTL text).
-- ```js
-  class DirectionExample extends React.Component {
-    state = {
-      contextDir: 'unset',
-      editorDir: 'unset',
-      rtlMoveVisually: true
-    }
-    render() {
-      return (
-        <InstUISettingsProvider
-          dir={
-            this.state.contextDir !== 'unset'
-              ? this.state.contextDir
-              : undefined
-          }
-        >
-          <View
-            display="block"
-            padding="medium medium small"
-            background="primary"
-          >
-            <View display="block" margin="small none large">
-              <FormFieldGroup
-                description="Settings"
-                layout="columns"
-                vAlign="top"
-              >
-                <RadioInputGroup
-                  name="contextDir"
-                  value={this.state.contextDir}
-                  description="context direction"
-                  onChange={(e, contextDir) => {
-                    this.setState({ contextDir })
-                  }}
-                >
-                  {['unset', 'ltr', 'rtl'].map((dir) => (
-                    <RadioInput key={dir} label={dir} value={dir} />
-                  ))}
-                </RadioInputGroup>
-                <RadioInputGroup
-                  name="editorDir"
-                  value={this.state.editorDir}
-                  description="editor direction"
-                  onChange={(e, editorDir) => {
-                    this.setState({ editorDir })
-                  }}
-                >
-                  {['unset', 'ltr', 'rtl'].map((dir) => (
-                    <RadioInput key={dir} label={dir} value={dir} />
-                  ))}
-                </RadioInputGroup>
-                <Checkbox
-                  label="rtlMoveVisually"
-                  defaultChecked={this.state.rtlMoveVisually}
-                  onChange={() => {
-                    this.setState({
-                      rtlMoveVisually: !this.state.rtlMoveVisually
-                    })
-                  }}
-                />
-              </FormFieldGroup>
-            </View>
-            <SourceCodeEditor
-              label="editable code editor"
-              language="jsx"
-              direction={
-                this.state.editorDir !== 'unset'
-                  ? this.state.editorDir
-                  : undefined
-              }
-              rtlMoveVisually={this.state.rtlMoveVisually}
-              defaultValue={`function directionExample(dir?: 'ltr' | 'rtl') {
-    console.log(dir)
-  }`}
-            />
-          </View>
-        </InstUISettingsProvider>
-      )
-    }
-  }
-  render(<DirectionExample />)
-  ```
-- ```js
+```js
+---
+type: example
+---
   const DirectionExample = () => {
     const [settings, setSettings] = useState({
       contextDir: 'unset',
@@ -1220,7 +648,7 @@ The `rtlMoveVisually` prop controls the cursor movement in RTL mode, whether it
   }
   render(<DirectionExample />)
-  ```
+```
 ### Focus management
@@ -1230,60 +658,10 @@ The `autofocus` prop will automatically focus the editor on the initial render.
 You can also manually focus the editor with its public `focus` method (the `hasFocus` getter is also available).
-- ```js
-  class FocusExample extends React.Component {
-    state = {
-      indentWithTab: true,
-      indentUnitCount: '2'
-    }
-    editor = null
-    render() {
-      return (
-        <View
-          display="block"
-          padding="medium medium small"
-          background="primary"
-        >
-          <View display="block" margin="small none large">
-            <Button
-              onClick={() => {
-                console.log('manual focus')
-                this.editor.focus()
-              }}
-            >
-              Focus editor
-            </Button>
-          </View>
-          <SourceCodeEditor
-            label="focus example"
-            ref={(component) => {
-              this.editor = component
-            }}
-            language="jsx"
-            onFocus={() => {
-              console.log('onFocus')
-              console.log({ hasFocus: this.editor.hasFocus })
-            }}
-            onBlur={() => {
-              console.log('onBlur')
-              console.log({ hasFocus: this.editor.hasFocus })
-            }}
-            defaultValue={`function exampleMethod(props: Props) {
-    return props ? props.value : null
-  }`}
-          />
-        </View>
-      )
-    }
-  }
-  render(<FocusExample />)
-  ```
-- ```js
+```js
+---
+type: example
+---
   const FocusExample = () => {
     const [indentWithTab, setIndentWithTab] = useState(true)
     const [indentUnitCount, setIndentUnitCount] = useState('2')
@@ -1324,83 +702,16 @@ You can also manually focus the editor with its public `focus` method (the `hasF
   }
   render(<FocusExample />)
-  ```
+```
 ### Attachment
 The `attachment` prop removes the top/bottom border-radius and margin of the editor, so it can be attached to the top or bottom of another element.
-- ```js
-  class AttachmentExample extends React.Component {
-    state = {
-      attachment: 'none'
-    }
-    render() {
-      const viewProps = {
-        as: 'div',
-        background: 'primary-inverse',
-        padding: 'small'
-      }
-      return (
-        <View
-          display="block"
-          padding="medium medium small"
-          background="primary"
-        >
-          <View display="block" margin="small none large">
-            <RadioInputGroup
-              name="attachmentExample"
-              value={this.state.attachment}
-              description="attachment"
-              onChange={(e, attachment) => {
-                this.setState({ attachment })
-              }}
-            >
-              {['none', 'top', 'bottom'].map((attachment) => (
-                <RadioInput
-                  key={attachment}
-                  label={attachment}
-                  value={attachment}
-                />
-              ))}
-            </RadioInputGroup>
-          </View>
-          {this.state.attachment === 'bottom' && (
-            <View {...viewProps}>
-              CodeEditor is attached to the bottom of this element
-            </View>
-          )}
-          <SourceCodeEditor
-            label="attachment example"
-            language="jsx"
-            attachment={
-              this.state.attachment === 'none'
-                ? undefined
-                : this.state.attachment
-            }
-            defaultValue={`const fruit: string = "apple"
-  function exampleMethod(props: Props) {
-    return props ? props.value : null
-  }`}
-          />
-          {this.state.attachment === 'top' && (
-            <View {...viewProps}>
-              CodeEditor is attached to the top of this element
-            </View>
-          )}
-        </View>
-      )
-    }
-  }
-  render(<AttachmentExample />)
-  ```
-- ```js
+```js
+---
+type: example
+---
   const AttachmentExample = () => {
     const [attachment, setAttachment] = useState('none')
@@ -1441,7 +752,7 @@ The `attachment` prop removes the top/bottom border-radius and margin of the edi
           language="jsx"
           attachment={attachment === 'none' ? undefined : attachment}
           defaultValue={`const fruit: string = "apple"
   function exampleMethod(props: Props) {
     return props ? props.value : null
   }`}
@@ -1456,7 +767,7 @@ The `attachment` prop removes the top/bottom border-radius and margin of the edi
   }
   render(<AttachmentExample />)
-  ```
+```
 ### Search