{
- this.scrollBarWidth = entries[0].target.offsetWidth - entries[0].target.clientWidth;
- this.scrollBarHeight = entries[0].target.offsetHeight - entries[0].target.clientHeight;
- this.textareaHeight = entries[0].target.offsetHeight;
- });
- textareaResizer.observe(this.$refs.textarea);
- // lineNumsResizer
- const lineNumsResizer = new ResizeObserver((entries) => {
- this.lineNumsWidth = entries[0].target.offsetWidth;
- });
- if (this.$refs.lineNums) {
- lineNumsResizer.observe(this.$refs.lineNums);
- }
- },
- copy() {
- if (document.execCommand("copy")) {
- this.$refs.textarea.select();
- document.execCommand("copy");
- window.getSelection().removeAllRanges();
- } else {
- navigator.clipboard.writeText(this.$refs.textarea.value);
- }
- },
- getLineNum() {
- // lineNum
- const str = this.$refs.textarea.value;
- let lineNum = 0;
- let position = str.indexOf("\n");
- while (position !== -1) {
- lineNum++;
- position = str.indexOf("\n", position + 1);
- }
- // heightNum
- const singleLineHeight = this.$refs.lineNums.firstChild.offsetHeight;
- const heightNum = parseInt(this.textareaHeight / singleLineHeight) - 1;
- // displayed lineNum
- this.lineNum = this.height == "auto" ? lineNum : lineNum > heightNum ? lineNum : heightNum;
- },
+ readOnly: {
+ type: Boolean,
+ default: false
},
- mounted() {
- this.$emit("lang", this.languages[0][0]);
- this.$emit("content", this.content);
- this.$emit("textarea", this.$refs.textarea);
- this.resizer();
+ autofocus: {
+ type: Boolean,
+ default: false
},
- updated() {
- if (this.insertTab) {
- this.$refs.textarea.setSelectionRange(this.cursorPosition, this.cursorPosition);
- this.insertTab = false;
- }
- if (this.lineNums) {
- if (this.scrolling) {
- this.scrolling = false;
- } else {
- this.getLineNum();
- }
- }
+ header: {
+ type: Boolean,
+ default: true
+ },
+ width: {
+ type: String,
+ default: '540px'
+ },
+ height: {
+ type: String,
+ default: 'auto'
+ },
+ maxWidth: {
+ type: String
+ },
+ minWidth: {
+ type: String
+ },
+ maxHeight: {
+ type: String
+ },
+ minHeight: {
+ type: String
+ },
+ borderRadius: {
+ type: String,
+ default: '12px'
+ },
+ languages: {
+ type: Array,
+ default: () => [['javascript', 'JS']]
+ },
+ langListWidth: {
+ type: String,
+ default: '110px'
+ },
+ langListHeight: {
+ type: String,
+ default: 'auto'
+ },
+ langListDisplay: {
+ type: Boolean,
+ default: false
+ },
+ displayLanguage: {
+ type: Boolean,
+ default: true
+ },
+ copyCode: {
+ type: Boolean,
+ default: true
},
+ zIndex: {
+ type: String,
+ default: '0'
+ },
+ fontSize: {
+ type: String,
+ default: '17px'
+ },
+ padding: {
+ type: String,
+ default: '20px'
+ }
+});
+const emits = defineEmits(['paste', 'focus']);
+
+const modelValue = defineModel();
+
+const refTextarea = ref(null);
+const refLineNums = ref(null);
+const refCode = ref(null);
+
+const message = ref('Copy code');
+const scrollBarWidth = ref(0);
+const scrollBarHeight = ref(0);
+const top = ref(0);
+const left = ref(0);
+const languageClass = ref(`hljs language-${props.languages[0][0]}`);
+const languageTitle = props.languages[0][1] ? props.languages[0][1] : props.languages[0][0];
+const content = ref(props.value);
+const cursorPosition = ref(0);
+const insertTab = ref(false);
+const lineNum = ref(0);
+const lineNumsWidth = ref(0);
+const scrolling = ref(false);
+const textareaHeight = ref(0);
+const showLineNums = ref(props.wrap ? false : props.lineNums);
+
+const tabWidth = computed(() => {
+ let result = '';
+ for (let i = 0; i < props.tabSpaces; i++) {
+ result += ' ';
+ }
+ return result;
+});
+const scroll = computed(() => {
+ return props.height !== 'auto';
+});
+
+function tab() {
+ if (document.execCommand('insertText')) {
+ document.execCommand('insertText', false, tabWidth.value);
+ } else {
+ const cursorPos = refTextarea.value.selectionStart;
+ content.value =
+ content.value.substring(0, cursorPos) + tabWidth.value + content.value.substring(cursorPos);
+ cursorPosition.value = cursorPos + tabWidth.value.length;
+ insertTab.value = true;
+ }
+};
+function calcScrollDistance(e) {
+ refCode.value.scrolling = true;
+ scrolling.value = true;
+ top.value = -e.target.scrollTop;
+ left.value = -e.target.scrollLeft;
};
+function resizer() {
+ // textareaResizer
+ const textareaResizer = new ResizeObserver((entries) => {
+ scrollBarWidth.value = entries[0].target.offsetWidth - entries[0].target.clientWidth;
+ scrollBarHeight.value = entries[0].target.offsetHeight - entries[0].target.clientHeight;
+ textareaHeight.value = entries[0].target.offsetHeight;
+ });
+ textareaResizer.observe(refTextarea.value);
+ // lineNumsResizer
+ const lineNumsResizer = new ResizeObserver((entries) => {
+ lineNumsWidth.value = entries[0].target.offsetWidth;
+ });
+ if (refLineNums.value) {
+ lineNumsResizer.observe(refLineNums.value);
+ }
+};
+function copy() {
+ if (document.execCommand('copy')) {
+ refTextarea.value.select();
+ document.execCommand('copy');
+ window.getSelection().removeAllRanges();
+ message.value = 'Copied!';
+ } else {
+ navigator.clipboard.writeText(refTextarea.value.value);
+ }
+};
+function getLineNum() {
+ // lineNum
+ const str = refTextarea.value.value;
+ let numLine = 0;
+ let position = str.indexOf('\n');
+ while (position !== -1) {
+ numLine++;
+ position = str.indexOf('\n', position + 1);
+ }
+ // heightNum
+ const singleLineHeight = refLineNums.value.firstChild.offsetHeight;
+ const heightNum = parseInt(textareaHeight.value / singleLineHeight) - 1;
+ // displayed lineNum
+ lineNum.value = props.height === 'auto' ? numLine : numLine > heightNum ? numLine : heightNum;
+};
+function getPasteValue(event) {
+ const pasteValue = event.clipboardData.getData('text');
+ emits('paste', pasteValue);
+}
+function updateHljs(){
+ const code = hljs.highlightAuto(modelValue.value);
+ refCode.value.innerHTML = code.value;
+}
+
+onMounted(() => {
+ modelValue.value = modelValue.value === undefined ? props.value : modelValue.value;
+ resizer();
+ updateHljs();
+});
+onUpdated(() => {
+ if (insertTab.value) {
+ refTextarea.value.setSelectionRange(cursorPosition.value, cursorPosition.value);
+ insertTab.value = false;
+ }
+ if (props.lineNums) {
+ if (scrolling.value) {
+ scrolling.value = false;
+ } else {
+ getLineNum();
+ }
+ }
+ updateHljs();
+});