@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
90 lines • 3.71 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { useCallback, useEffect, useRef, useState } from 'react';
import { useCurrentMode } from '@awsui/component-toolkit/internal';
import { getAceTheme, getDefaultConfig, getDefaultTheme } from './util';
export function useEditor(ace, themes, loading) {
const editorRef = useRef(null);
const [editor, setEditor] = useState(null);
const [initialTheme] = useState(getAceTheme(getDefaultTheme(useCurrentMode(editorRef), themes)));
useEffect(() => {
const elem = editorRef.current;
if (!ace || !elem) {
return;
}
const config = getDefaultConfig(ace);
setEditor(ace.edit(elem, Object.assign(Object.assign({}, config), { theme: initialTheme })));
}, [ace, loading, initialTheme]);
return { editorRef, editor };
}
export function useSyncEditorLabels(editor, { controlId, ariaLabel, ariaLabelledby, ariaDescribedby, }) {
useEffect(() => {
if (!editor) {
return;
}
const { textarea } = editor.renderer;
if (!textarea) {
return;
}
// Update attributes on the textarea element manually. This is fine as long as ace
// doesn't touch these attributes as well.
const updateAttribute = (attribute, value) => {
if (value) {
textarea.setAttribute(attribute, value);
}
else {
textarea.removeAttribute(attribute);
}
};
updateAttribute('id', controlId);
updateAttribute('aria-labelledby', ariaLabelledby);
updateAttribute('aria-describedby', ariaDescribedby);
// Ace (starting from v1.34.0) has a built-in setting to provide an aria-label.
// For older versions (before aria-label was managed by ace), we still use the
// attribute method.
if (typeof editor.getOption('textInputAriaLabel') === 'string') {
editor.setOption('textInputAriaLabel', ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : '');
}
else {
updateAttribute('aria-label', ariaLabel);
}
}, [ariaLabel, ariaDescribedby, ariaLabelledby, controlId, editor]);
}
export function useSyncEditorSize(editor, { width, height }) {
useEffect(() => {
editor === null || editor === void 0 ? void 0 : editor.resize();
}, [editor, width, height]);
const onResize = useCallback(() => {
editor === null || editor === void 0 ? void 0 : editor.resize();
}, [editor]);
return { onResize };
}
export function useSyncEditorValue(editor, value) {
useEffect(() => {
if (!editor) {
return;
}
if (value === editor.getValue()) {
return;
}
const pos = editor.session.selection.toJSON();
editor.setValue(value, -1);
editor.session.selection.fromJSON(pos);
}, [editor, value]);
}
export function useSyncEditorLanguage(editor, language) {
useEffect(() => {
editor === null || editor === void 0 ? void 0 : editor.session.setMode(`ace/mode/${language}`);
}, [editor, language]);
}
export function useSyncEditorWrapLines(editor, wrapLines) {
useEffect(() => {
editor === null || editor === void 0 ? void 0 : editor.session.setUseWrapMode(wrapLines !== null && wrapLines !== void 0 ? wrapLines : true);
}, [editor, wrapLines]);
}
export function useSyncEditorTheme(editor, theme) {
useEffect(() => {
editor === null || editor === void 0 ? void 0 : editor.setTheme(getAceTheme(theme));
}, [editor, theme]);
}
//# sourceMappingURL=use-editor.js.map