ContentEditable

ContentEditable

:global(.my-input) {
  padding-left: 4px;
}

:global(.my-input[disabled]) {
  border: 1px solid var(--ring-border-disabled-color);
  background-color: var(--ring-disabled-color);
}

<div class="my-input" id='contenteditable'></div>
<div id='contenteditable-disabled' style="padding-top: 16px;"></div>

import '@jetbrains/ring-ui/components/input/input.scss';
import {render} from 'react-dom';
import React from 'react';

import ContentEditable from '@jetbrains/ring-ui/components/contenteditable/contenteditable';

render(
  <ContentEditable className="my-input">
    <span>text <b>bold text</b> text</span>
  </ContentEditable>,
  document.getElementById('contenteditable')
);

render(
  <ContentEditable className="my-input" disabled={true}>
    <span>text <b>bold text</b> text</span>
  </ContentEditable>,
  document.getElementById('contenteditable-disabled')
);