[Feature Request]: Read only code component? about components

[just-boris]

The older answer still applies: #456 (comment)

As the name suggests, code editor is for editable use-cases only. For read-only cases use another component. Loading Ace library for read-only use-case is a very big overkill. There are more lightweight options out there.

Updated the issue title to reflect what it really tracks (providing an official component for viewing code)

[pan-kot]

Hello Nichita,

The code editor currently does not support a read-only mode, but it is on our radar. The main concern is the impact on the bundle size the code editor has. Ideally, we want the readonly variant to be lightweight.

A viable alternative four now could be, for instance, https://prismjs.com/ to bring syntax highlight to the code snippets.

[nichita-pasecinic]

@fr0stf0x you could just change the config of the global 'Ace' instance to readOnly mode

useEffect(() => {
    import('ace-builds').then((aceLib) => {
      aceLib.config.set('themePath', CDN);
      aceLib.config.set('basePath', CDN);
      aceLib.config.set('modePath', CDN);
      aceLib.config.set('themePath', CDN);
      aceLib.config.set('workerPath', CDN);
     // this one
      aceLib.config.set('readOnly', readOnly); 
      aceLib.config.set('showPrintMargin', false);
      setAce(aceLib);
      setLoading(false);
    });
  }, [readOnly]);

In my case readOnly is a component prop

[connorlanigan]

We have recently released the CodeView component. Details and examples can be found on the component's page on our website.

[nichita-pasecinic]

editor ref is not really necessary at this point, setting ace config is enough for now ace.config.set('readOnly', true).

[nichita-pasecinic]

IDK if there would be a more advances use case where editorRef would be necessary, but I'll surrey get back here 😄

Thanks, nice ui-kit!

[fr0stf0x]

@pan-kot @nichita-pasecinic any updates on this?

by far my solution is prevent any keydown or mousedown events but when I press backspace or delete, the code editor still displays the changed value

// MyCodeEditor.tsx

function preventChangeIfNeeded(event: KeyboardEvent) {
  // 'backspace' and 'delete' do not go into this
  const { target } = event;

  if (target && (target as HTMLTextAreaElement).classList.contains('ace_text-input')) {
    event.preventDefault();
    event.stopPropagation();
  }
}

function hideCursor(event: MouseEvent) {
  const cursorLayer = document.querySelector('.ace_cursor-layer');

  if (cursorLayer) {
    event.preventDefault();
    event.stopPropagation();
    (cursorLayer as HTMLDivElement).style.display = 'none';
  }
}

function MyCodeEditor({readonly}) {
// ...
  useEffect(() => {
    if (readonly) {
      window.addEventListener('keydown', preventChangeIfNeeded);
      window.addEventListener('mousedown', hideCursor);

      return () => {
        window.removeEventListener('keydown', preventChangeIfNeeded);
        window.removeEventListener('mousedown', hideCursor);
      };
    }
  }, [readonly]);
// ...
}