Comments (7)
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)
from components.
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.
from components.
@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
from components.
We have recently released the CodeView component. Details and examples can be found on the component's page on our website.
from components.
editor ref is not really necessary at this point, setting ace config is enough for now ace.config.set('readOnly', true)
.
from components.
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!
from components.
@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]);
// ...
}
from components.
Related Issues (20)
- [Bug]: Slider component doesn't work with decimal HOT 2
- [Feature Request]: CloudWatch dashboard UI button not aligned HOT 1
- [Feature Request]: Adding Virtual Rendering to a Table Component HOT 3
- [Bug]: Build Error HOT 2
- Sint at et optio et HOT 1
- [Bug]: Date picker value format is different with show format HOT 2
- [Bug]: 'getLogicalBoundingClientRect' is not exported HOT 2
- top nav bar issue HOT 1
- Limit number of pagination pages shown when having large amount of items. HOT 1
- [Feature Request]: Time Picker HOT 1
- [Feature Request]: Hope to support Menu tabs theme customization ability HOT 3
- [Bug]: Drag and drop to upload a file does not work on macOS Safari HOT 2
- [Feature Request]: Paste to upload file HOT 3
- [Bug]: Gap between files missing on Safari HOT 1
- [Bug]: Updating selectedItems in Table component does not update HOT 1
- [Bug]: `act` from `react-dom/test-utils` is deprecated HOT 4
- [Bug]: Warning when openning and then closing dialog in tests HOT 4
- [Feature Request]: Custom button for DateRangePicker trigger node. HOT 1
- [Feature Request]: Allow year-by-year navigation in date picker HOT 3
- [Bug]: Missing "./internal/analytics-metadata" specifier in "@cloudscape-design/component-toolkit" package after upgrading from 3.0.684 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from components.