Revert "Add experimental highlighting to composer textarea"
This reverts commit 017b138d4b.
This commit is contained in:
Lim Chee Aun
parent
49bb42e6cc
commit
06548bbbfc
67
package-lock.json
generated
67
package-lock.json
generated
|
|
@ -25,7 +25,6 @@
|
|||
"react-hotkeys-hook": "~4.3.7",
|
||||
"react-intersection-observer": "~9.4.2",
|
||||
"react-router-dom": "6.6.2",
|
||||
"rich-textarea": "~0.19.5",
|
||||
"string-length": "~5.0.1",
|
||||
"swiped-events": "~1.1.7",
|
||||
"toastify-js": "~1.12.0",
|
||||
|
|
@ -3201,20 +3200,6 @@
|
|||
"@babel/core": "^7.12.10"
|
||||
}
|
||||
},
|
||||
"node_modules/babel-runtime": {
|
||||
"version": "4.7.4",
|
||||
"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-4.7.4.tgz",
|
||||
"integrity": "sha512-0gnK56hiHkbUCwqtaiK15MAsnNxI8T7aOBYUyoAYyNxWs86ExL0NNTDhn0eDO/AIhJf0oXMgV5+1wfSLQ/FMyw==",
|
||||
"dependencies": {
|
||||
"core-js": "^0.6.1"
|
||||
}
|
||||
},
|
||||
"node_modules/babel-runtime/node_modules/core-js": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-0.6.1.tgz",
|
||||
"integrity": "sha512-ANdRS9QdyvvVCqMD7gvDhgI5T+/t5FELQB1ZLN94oCDXTJLwt4Q1o6Nbc1wnVrhl6QPyJ5mv0k8hMCdAFLNbLg==",
|
||||
"deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js."
|
||||
},
|
||||
"node_modules/balanced-match": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
|
|
@ -5748,14 +5733,6 @@
|
|||
"safe-buffer": "^5.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/range-at-index": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/range-at-index/-/range-at-index-1.0.4.tgz",
|
||||
"integrity": "sha512-Aob2FK5jL0cCKvIzA0tuRrdsSXTvxLY5p9dr7GrLY31NwKtUk5EhgHwcKi0kbUacJukGVRglLi6MEqBHB4NHMA==",
|
||||
"dependencies": {
|
||||
"babel-runtime": "4.7.4"
|
||||
}
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||
|
|
@ -5980,18 +5957,6 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/rich-textarea": {
|
||||
"version": "0.19.5",
|
||||
"resolved": "https://registry.npmjs.org/rich-textarea/-/rich-textarea-0.19.5.tgz",
|
||||
"integrity": "sha512-jGzE84BUs0VKLTEIdJaQcToQjRxYO1aNRnPNtnGupkwKWl59dCpp5EWWi5qxU1JMjPtKOBFSSynYG0srr71TJw==",
|
||||
"dependencies": {
|
||||
"range-at-index": "^1.0.4",
|
||||
"use-sync-external-store": "^1.2.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.14.0"
|
||||
}
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "3.12.1",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.12.1.tgz",
|
||||
|
|
@ -9181,21 +9146,6 @@
|
|||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"babel-runtime": {
|
||||
"version": "4.7.4",
|
||||
"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-4.7.4.tgz",
|
||||
"integrity": "sha512-0gnK56hiHkbUCwqtaiK15MAsnNxI8T7aOBYUyoAYyNxWs86ExL0NNTDhn0eDO/AIhJf0oXMgV5+1wfSLQ/FMyw==",
|
||||
"requires": {
|
||||
"core-js": "^0.6.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-0.6.1.tgz",
|
||||
"integrity": "sha512-ANdRS9QdyvvVCqMD7gvDhgI5T+/t5FELQB1ZLN94oCDXTJLwt4Q1o6Nbc1wnVrhl6QPyJ5mv0k8hMCdAFLNbLg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
|
|
@ -10942,14 +10892,6 @@
|
|||
"safe-buffer": "^5.1.0"
|
||||
}
|
||||
},
|
||||
"range-at-index": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/range-at-index/-/range-at-index-1.0.4.tgz",
|
||||
"integrity": "sha512-Aob2FK5jL0cCKvIzA0tuRrdsSXTvxLY5p9dr7GrLY31NwKtUk5EhgHwcKi0kbUacJukGVRglLi6MEqBHB4NHMA==",
|
||||
"requires": {
|
||||
"babel-runtime": "4.7.4"
|
||||
}
|
||||
},
|
||||
"react": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||
|
|
@ -11115,15 +11057,6 @@
|
|||
"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
|
||||
"dev": true
|
||||
},
|
||||
"rich-textarea": {
|
||||
"version": "0.19.5",
|
||||
"resolved": "https://registry.npmjs.org/rich-textarea/-/rich-textarea-0.19.5.tgz",
|
||||
"integrity": "sha512-jGzE84BUs0VKLTEIdJaQcToQjRxYO1aNRnPNtnGupkwKWl59dCpp5EWWi5qxU1JMjPtKOBFSSynYG0srr71TJw==",
|
||||
"requires": {
|
||||
"range-at-index": "^1.0.4",
|
||||
"use-sync-external-store": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"rollup": {
|
||||
"version": "3.12.1",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.12.1.tgz",
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@
|
|||
"react-hotkeys-hook": "~4.3.7",
|
||||
"react-intersection-observer": "~9.4.2",
|
||||
"react-router-dom": "6.6.2",
|
||||
"rich-textarea": "~0.19.5",
|
||||
"string-length": "~5.0.1",
|
||||
"swiped-events": "~1.1.7",
|
||||
"toastify-js": "~1.12.0",
|
||||
|
|
|
|||
|
|
@ -466,12 +466,6 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.compose-highlight,
|
||||
.compose-link {
|
||||
color: var(--link-color);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@media (min-width: 50em) {
|
||||
#media-sheet main {
|
||||
flex-direction: row;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import equal from 'fast-deep-equal';
|
|||
import { forwardRef } from 'preact/compat';
|
||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import { createRegexRenderer, RichTextarea } from 'rich-textarea';
|
||||
import stringLength from 'string-length';
|
||||
import { uid } from 'uid/single';
|
||||
import { useDebouncedCallback } from 'use-debounce';
|
||||
|
|
@ -1039,28 +1038,6 @@ function Compose({
|
|||
);
|
||||
}
|
||||
|
||||
const HIGHLIGHT_REG = /(#|@|:)[\p{L}\p{M}\p{N}\p{Pc}_@\.]+:?/gu;
|
||||
const highlightRenderer = createRegexRenderer([
|
||||
[
|
||||
HIGHLIGHT_REG,
|
||||
({ value }) => {
|
||||
const first = value[0];
|
||||
const last = value[value.length - 1] === ':' ? ':' : '';
|
||||
const rest = value.slice(1, last ? -1 : undefined);
|
||||
return (
|
||||
<>
|
||||
<mark class="compose-highlight">{first}</mark>
|
||||
{rest}
|
||||
{last && <mark class="compose-highlight">{last}</mark>}
|
||||
</>
|
||||
);
|
||||
},
|
||||
],
|
||||
[urlRegexObj, (props) => <mark class="compose-link" {...props} />],
|
||||
]);
|
||||
|
||||
const RICH_TEXTAREA = true;
|
||||
|
||||
const Textarea = forwardRef((props, ref) => {
|
||||
const { masto } = api();
|
||||
const [text, setText] = useState(ref.current?.value || '');
|
||||
|
|
@ -1239,39 +1216,33 @@ const Textarea = forwardRef((props, ref) => {
|
|||
};
|
||||
}, []);
|
||||
|
||||
const fieldProps = {
|
||||
autoCapitalize: 'sentences',
|
||||
autoComplete: 'on',
|
||||
autoCorrect: 'on',
|
||||
spellCheck: 'true',
|
||||
dir: 'auto',
|
||||
rows: '6',
|
||||
cols: '50',
|
||||
...textareaProps,
|
||||
ref,
|
||||
name: 'status',
|
||||
value: text,
|
||||
onInput: (e) => {
|
||||
const { scrollHeight, offsetHeight, clientHeight, value } = e.target;
|
||||
setText(value);
|
||||
const offset = offsetHeight - clientHeight;
|
||||
e.target.style.height = value ? scrollHeight + offset + 'px' : null;
|
||||
props.onInput?.(e);
|
||||
},
|
||||
style: {
|
||||
width: '100%',
|
||||
height: '4em',
|
||||
'--text-weight': (1 + charCount / 140).toFixed(1) || 1,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<text-expander ref={textExpanderRef} keys="@ # :">
|
||||
{RICH_TEXTAREA ? (
|
||||
<RichTextarea {...fieldProps}>{highlightRenderer}</RichTextarea>
|
||||
) : (
|
||||
<textarea {...fieldProps} />
|
||||
)}
|
||||
<textarea
|
||||
autoCapitalize="sentences"
|
||||
autoComplete="on"
|
||||
autoCorrect="on"
|
||||
spellCheck="true"
|
||||
dir="auto"
|
||||
rows="6"
|
||||
cols="50"
|
||||
{...textareaProps}
|
||||
ref={ref}
|
||||
name="status"
|
||||
value={text}
|
||||
onInput={(e) => {
|
||||
const { scrollHeight, offsetHeight, clientHeight, value } = e.target;
|
||||
setText(value);
|
||||
const offset = offsetHeight - clientHeight;
|
||||
e.target.style.height = value ? scrollHeight + offset + 'px' : null;
|
||||
props.onInput?.(e);
|
||||
}}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '4em',
|
||||
'--text-weight': (1 + charCount / 140).toFixed(1) || 1,
|
||||
}}
|
||||
/>
|
||||
</text-expander>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue