Software Development

#10: Post edited by

ShadowsRanger‭ · 2023-09-06T12:47:34Z (about 1 year ago)

Copy Link

Raw

Markdown

I'm trying to create an automatic text-to-link conversion feature in a TypeScript application. The desired workflow is:
1. Copy a URL to the clipboard
2. Select some text
3. Paste the URL - this should convert the selected text into a link pointing to the pasted URL
For example:
```
Selected text: "Click here"
Pasted URL: "https://www.example.com"
Returns: [Click here](https://www.example.com)
```
This allows easily creating links on the fly without typing Markdown syntax manually.
I tried implementing this in a TypeScript project with the following code:
```ts
let selectedText = '';
document.addEventListener('copy', e => {
const selection = window.getSelection();
if (selection) {
selectedText = selection.toString();
}
});
document.addEventListener('paste', e => {
if (e.clipboardData) {
const pasted = e.clipboardData.getData('text');
if (isValidUrl(pasted)) {
e.preventDefault();
insertLink(selectedText, pasted);
}
}
});
function insertLink(text: string, url: string): void {
document.execCommand('insertHTML', false, `[${text}](${url})`);
}
function isValidUrl(url: string): boolean {
try {
new URL(url);
return true;
} catch (err) {
return false;
}
}
```
To test this code, I set up a TypeScript project on Manjaro Linux and configured Jest for testing:
1. Installed Node.js and npm using `sudo pacman -S nodejs npm`
2. Created a new TS project
```sh
mkdir my-ts-project
cd my-ts-project
npm init -y
```
3. Installed TypeScript with `npm install --save-dev typescript`
4. Added a `tsconfig.json` file with `npx tsc --init`
5. Installed Jest, ts-jest, and @types/jest packages with `npm install --save-dev jest ts-jest @types/jest`
6. Added jest.config.js for configuration
```js
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
};
```
7. Added test script to package.json
8. Wrote the code in `src/index.ts` and test cases in `src/index.test.ts`
```ts
// src/index.test.ts
import { Clipboard } from './mocks/clipboard';
describe('copy handler', () => {
it('copies selected text to clipboard', () => {
const selectedText = 'hello';
window.getSelection = () => {
return {
toString: () => selectedText
} as unknown as Selection;
};
document.addEventListener('copy', e => {
if(e.clipboardData) {
e.clipboardData.setData('text', selectedText);
}
});
document.dispatchEvent(new Event('copy'));
expect(Clipboard.prototype.writeText).toHaveBeenCalledWith(selectedText);
});
});
describe('paste handler', () => {
it('inserts link on valid url paste', () => {
const url = 'https://example.com';
Clipboard.prototype.clipboardText = url;
document.addEventListener('paste', e => {
if(e.clipboardData) {
const pasted = Clipboard.prototype.readText();
if(isValidUrl(pasted)) {
insertLink('text', pasted);
}
}
});
document.dispatchEvent(new Event('paste'));
expect(insertLink).toHaveBeenCalledWith('text', url);
});
});
```
```ts
// src/mocks/clipboard.ts
export class Clipboard {
public static prototype = {
writeText: jest.fn(),
readText: jest.fn(),
clipboardText: ''
};
}
```
9. Ran tests with `npm test`
However, when running `npm test`, I got some errors:
```sh
> test@1.0.0 test
> jest
FAIL src/index.test.ts
● Test suite failed to run
src/index.test.ts:25:32 - error TS2339: Property 'writeText' does not exist on type 'Clipboard'.
25 expect(Clipboard.prototype.writeText).toHaveBeenCalledWith(selectedText);
~~~~~~~~~
src/index.test.ts:35:25 - error TS2339: Property 'clipboardText' does not exist on type 'Clipboard'.
35 Clipboard.prototype.clipboardText = url;
~~~~~~~~~~~~~
src/index.test.ts:39:44 - error TS2339: Property 'readText' does not exist on type 'Clipboard'.
39 const pasted = Clipboard.prototype.readText();
~~~~~~~~
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 2.056 s
Ran all test suites.
```
~~How can I fix the errors and properly mock the clipboard in my tests?~~

I'm trying to create an automatic text-to-link conversion feature in a TypeScript application. The desired workflow is:
1. Copy a URL to the clipboard
2. Select some text
3. Paste the URL - this should convert the selected text into a link pointing to the pasted URL
For example:
```
Selected text: "Click here"
Pasted URL: "https://www.example.com"
Returns: [Click here](https://www.example.com)
```
This allows easily creating links on the fly without typing Markdown syntax manually.
I tried implementing this in a TypeScript project with the following code:
```ts
let selectedText = '';
document.addEventListener('copy', e => {
const selection = window.getSelection();
if (selection) {
selectedText = selection.toString();
}
});
document.addEventListener('paste', e => {
if (e.clipboardData) {
const pasted = e.clipboardData.getData('text');
if (isValidUrl(pasted)) {
e.preventDefault();
insertLink(selectedText, pasted);
}
}
});
function insertLink(text: string, url: string): void {
document.execCommand('insertHTML', false, `[${text}](${url})`);
}
function isValidUrl(url: string): boolean {
try {
new URL(url);
return true;
} catch (err) {
return false;
}
}
```
To test this code, I set up a TypeScript project on Manjaro Linux and configured Jest for testing:
1. Installed Node.js and npm using `sudo pacman -S nodejs npm`
2. Created a new TS project
```sh
mkdir my-ts-project
cd my-ts-project
npm init -y
```
3. Installed TypeScript with `npm install --save-dev typescript`
4. Added a `tsconfig.json` file with `npx tsc --init`
5. Installed Jest, ts-jest, and @types/jest packages with `npm install --save-dev jest ts-jest @types/jest`
6. Added jest.config.js for configuration
```js
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
};
```
7. Added test script to package.json
8. Wrote the code in `src/index.ts` and test cases in `src/index.test.ts`
```ts
// src/index.test.ts
import { Clipboard } from './mocks/clipboard';
describe('copy handler', () => {
it('copies selected text to clipboard', () => {
const selectedText = 'hello';
window.getSelection = () => {
return {
toString: () => selectedText
} as unknown as Selection;
};
document.addEventListener('copy', e => {
if(e.clipboardData) {
e.clipboardData.setData('text', selectedText);
}
});
document.dispatchEvent(new Event('copy'));
expect(Clipboard.prototype.writeText).toHaveBeenCalledWith(selectedText);
});
});
describe('paste handler', () => {
it('inserts link on valid url paste', () => {
const url = 'https://example.com';
Clipboard.prototype.clipboardText = url;
document.addEventListener('paste', e => {
if(e.clipboardData) {
const pasted = Clipboard.prototype.readText();
if(isValidUrl(pasted)) {
insertLink('text', pasted);
}
}
});
document.dispatchEvent(new Event('paste'));
expect(insertLink).toHaveBeenCalledWith('text', url);
});
});
```
```ts
// src/mocks/clipboard.ts
export class Clipboard {
public static prototype = {
writeText: jest.fn(),
readText: jest.fn(),
clipboardText: ''
};
}
```
9. Ran tests with `npm test`
However, when running `npm test`, I got some errors:
```sh
> test@1.0.0 test
> jest
FAIL src/index.test.ts
● Test suite failed to run
src/index.test.ts:25:32 - error TS2339: Property 'writeText' does not exist on type 'Clipboard'.
25 expect(Clipboard.prototype.writeText).toHaveBeenCalledWith(selectedText);
~~~~~~~~~
src/index.test.ts:35:25 - error TS2339: Property 'clipboardText' does not exist on type 'Clipboard'.
35 Clipboard.prototype.clipboardText = url;
~~~~~~~~~~~~~
src/index.test.ts:39:44 - error TS2339: Property 'readText' does not exist on type 'Clipboard'.
39 const pasted = Clipboard.prototype.readText();
~~~~~~~~
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 2.056 s
Ran all test suites.
```
I want to write tests for:
* empty clipboard
* valid URL
* invalid URL
How can I fix the errors and properly mock the clipboard in the tests?

#9: Post edited by

ShadowsRanger‭ · 2023-09-06T12:39:09Z (about 1 year ago)

Copy Link

Raw

Markdown

~~# How to implement automatic text-to-link conversion in TypeScript?~~
~~I'm trying to create an automatic text-to-link conversion feature in a JavaScript application. The desired workflow is:~~
1. Copy a URL to the clipboard
2. Select some text
3. Paste the URL - this should convert the selected text into a link pointing to the pasted URL
For example:
```
Selected text: "Click here"
Pasted URL: "https://www.example.com"
Returns: [Click here](https://www.example.com)
```
This allows easily creating links on the fly without typing Markdown syntax manually.
I tried implementing this in a TypeScript project with the following code:
```ts
let selectedText = '';
document.addEventListener('copy', e => {
const selection = window.getSelection();
if (selection) {
selectedText = selection.toString();
}
});
document.addEventListener('paste', e => {
if (e.clipboardData) {
const pasted = e.clipboardData.getData('text');
if (isValidUrl(pasted)) {
e.preventDefault();
insertLink(selectedText, pasted);
}
}
});
function insertLink(text: string, url: string): void {
document.execCommand('insertHTML', false, `[${text}](${url})`);
}
function isValidUrl(url: string): boolean {
try {
new URL(url);
return true;
} catch (err) {
return false;
}
}
```
To test this code, I set up a TypeScript project on Manjaro Linux and configured Jest for testing:
~~1. Installed Node.js and npm using `pacman`~~
~~2. Created a new TS project with `npm init -y`~~
3. Installed TypeScript with `npm install --save-dev typescript`
4. Added a `tsconfig.json` file with `npx tsc --init`
5. Installed Jest, ts-jest, and @types/jest packages with `npm install --save-dev jest ts-jest @types/jest`
6. Added jest.config.js for configuration
~~```~~
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
};
```
7. Added test script to package.json
8. Wrote the code in `src/index.ts` and test cases in `src/index.test.ts`
```ts
// src/index.test.ts
import { Clipboard } from './mocks/clipboard';
describe('copy handler', () => {
it('copies selected text to clipboard', () => {
const selectedText = 'hello';
window.getSelection = () => {
return {
toString: () => selectedText
} as unknown as Selection;
};
document.addEventListener('copy', e => {
if(e.clipboardData) {
e.clipboardData.setData('text', selectedText);
}
});
document.dispatchEvent(new Event('copy'));
expect(Clipboard.prototype.writeText).toHaveBeenCalledWith(selectedText);
});
});
describe('paste handler', () => {
it('inserts link on valid url paste', () => {
const url = 'https://example.com';
Clipboard.prototype.clipboardText = url;
document.addEventListener('paste', e => {
if(e.clipboardData) {
const pasted = Clipboard.prototype.readText();
if(isValidUrl(pasted)) {
insertLink('text', pasted);
}
}
});
document.dispatchEvent(new Event('paste'));
expect(insertLink).toHaveBeenCalledWith('text', url);
});
});
```
```ts
// src/mocks/clipboard.ts
export class Clipboard {
public static prototype = {
writeText: jest.fn(),
readText: jest.fn(),
clipboardText: ''
};
}
```
9. Ran tests with `npm test`
However, when running `npm test`, I got some errors:
~~```~~
> test@1.0.0 test
> jest
FAIL src/index.test.ts
● Test suite failed to run
src/index.test.ts:25:32 - error TS2339: Property 'writeText' does not exist on type 'Clipboard'.
25 expect(Clipboard.prototype.writeText).toHaveBeenCalledWith(selectedText);
~~~~~~~~~
src/index.test.ts:35:25 - error TS2339: Property 'clipboardText' does not exist on type 'Clipboard'.
35 Clipboard.prototype.clipboardText = url;
~~~~~~~~~~~~~
src/index.test.ts:39:44 - error TS2339: Property 'readText' does not exist on type 'Clipboard'.
39 const pasted = Clipboard.prototype.readText();
~~~~~~~~
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 2.056 s
Ran all test suites.
```
How can I fix the errors and properly mock the clipboard in my tests?

I'm trying to create an automatic text-to-link conversion feature in a TypeScript application. The desired workflow is:
1. Copy a URL to the clipboard
2. Select some text
3. Paste the URL - this should convert the selected text into a link pointing to the pasted URL
For example:
```
Selected text: "Click here"
Pasted URL: "https://www.example.com"
Returns: [Click here](https://www.example.com)
```
This allows easily creating links on the fly without typing Markdown syntax manually.
I tried implementing this in a TypeScript project with the following code:
```ts
let selectedText = '';
document.addEventListener('copy', e => {
const selection = window.getSelection();
if (selection) {
selectedText = selection.toString();
}
});
document.addEventListener('paste', e => {
if (e.clipboardData) {
const pasted = e.clipboardData.getData('text');
if (isValidUrl(pasted)) {
e.preventDefault();
insertLink(selectedText, pasted);
}
}
});
function insertLink(text: string, url: string): void {
document.execCommand('insertHTML', false, `[${text}](${url})`);
}
function isValidUrl(url: string): boolean {
try {
new URL(url);
return true;
} catch (err) {
return false;
}
}
```
To test this code, I set up a TypeScript project on Manjaro Linux and configured Jest for testing:
1. Installed Node.js and npm using `sudo pacman -S nodejs npm`
2. Created a new TS project
```sh
mkdir my-ts-project
cd my-ts-project
npm init -y
```
3. Installed TypeScript with `npm install --save-dev typescript`
4. Added a `tsconfig.json` file with `npx tsc --init`
5. Installed Jest, ts-jest, and @types/jest packages with `npm install --save-dev jest ts-jest @types/jest`
6. Added jest.config.js for configuration
```js
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
};
```
7. Added test script to package.json
8. Wrote the code in `src/index.ts` and test cases in `src/index.test.ts`
```ts
// src/index.test.ts
import { Clipboard } from './mocks/clipboard';
describe('copy handler', () => {
it('copies selected text to clipboard', () => {
const selectedText = 'hello';
window.getSelection = () => {
return {
toString: () => selectedText
} as unknown as Selection;
};
document.addEventListener('copy', e => {
if(e.clipboardData) {
e.clipboardData.setData('text', selectedText);
}
});
document.dispatchEvent(new Event('copy'));
expect(Clipboard.prototype.writeText).toHaveBeenCalledWith(selectedText);
});
});
describe('paste handler', () => {
it('inserts link on valid url paste', () => {
const url = 'https://example.com';
Clipboard.prototype.clipboardText = url;
document.addEventListener('paste', e => {
if(e.clipboardData) {
const pasted = Clipboard.prototype.readText();
if(isValidUrl(pasted)) {
insertLink('text', pasted);
}
}
});
document.dispatchEvent(new Event('paste'));
expect(insertLink).toHaveBeenCalledWith('text', url);
});
});
```
```ts
// src/mocks/clipboard.ts
export class Clipboard {
public static prototype = {
writeText: jest.fn(),
readText: jest.fn(),
clipboardText: ''
};
}
```
9. Ran tests with `npm test`
However, when running `npm test`, I got some errors:
```sh
> test@1.0.0 test
> jest
FAIL src/index.test.ts
● Test suite failed to run
src/index.test.ts:25:32 - error TS2339: Property 'writeText' does not exist on type 'Clipboard'.
25 expect(Clipboard.prototype.writeText).toHaveBeenCalledWith(selectedText);
~~~~~~~~~
src/index.test.ts:35:25 - error TS2339: Property 'clipboardText' does not exist on type 'Clipboard'.
35 Clipboard.prototype.clipboardText = url;
~~~~~~~~~~~~~
src/index.test.ts:39:44 - error TS2339: Property 'readText' does not exist on type 'Clipboard'.
39 const pasted = Clipboard.prototype.readText();
~~~~~~~~
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 2.056 s
Ran all test suites.
```
How can I fix the errors and properly mock the clipboard in my tests?

#8: Post edited by

ShadowsRanger‭ · 2023-09-06T11:54:38Z (about 1 year ago)

Copy Link

Raw

Markdown

I'm trying to create an automatic text-to-link conversion feature in a JavaScript application. The desired workflow is:
1. Copy a URL to the clipboard
2. Select some text
3. Paste the URL - this should convert the selected text into a link pointing to the pasted URL
For example:
```
Selected text: "Click here"
Pasted URL: "https://www.example.com"
Returns: [Click here](https://www.example.com)
```
This allows easily creating links on the fly without typing Markdown syntax manually.
I tried implementing this in a TypeScript project with the following code:
~~```typescript~~
let selectedText = '';
document.addEventListener('copy', e => {
const selection = window.getSelection();
if (selection) {
selectedText = selection.toString();
}
});
document.addEventListener('paste', e => {
if (e.clipboardData) {
const pasted = e.clipboardData.getData('text');
if (isValidUrl(pasted)) {
e.preventDefault();
insertLink(selectedText, pasted);
}
}
});
function insertLink(text: string, url: string): void {
document.execCommand('insertHTML', false, `[${text}](${url})`);
}
function isValidUrl(url: string): boolean {
try {
new URL(url);
return true;
} catch (err) {
return false;
}
}
```
To test this code, I set up a TypeScript project on Manjaro Linux and configured Jest for testing:
1. Installed Node.js and npm using `pacman`
2. Created a new TS project with `npm init -y`
3. Installed TypeScript with `npm install --save-dev typescript`
4. Added a `tsconfig.json` file with `npx tsc --init`
5. Installed Jest, ts-jest, and @types/jest packages with `npm install --save-dev jest ts-jest @types/jest`
6. Added jest.config.js for configuration
```
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
};
```
7. Added test script to package.json
8. Wrote the code in `src/index.ts` and test cases in `src/index.test.ts`
~~```~~
describe('copy handler', () => {
it('copies selected text to clipboard', () => {
const selectedText = 'hello';
window.getSelection = () => {
return {
toString: () => selectedText
} as unknown as Selection;
};
document.addEventListener('copy', e => {
if(e.clipboardData) {
~~e.clipboardData.setData('text', selectedText);~~
}
});
document.dispatchEvent(new Event('copy'));
~~expect(Clipboard.writeText).toHaveBeenCalledWith(selectedText);~~
});
});
describe('paste handler', () => {
it('inserts link on valid url paste', () => {
const url = 'https://example.com';
~~Clipboard.clipboardText = url;~~
document.addEventListener('paste', e => {
if(e.clipboardData) {
~~const pasted = Clipboard.readText();~~
if(isValidUrl(pasted)) {
insertLink('text', pasted);
}
}
});
document.dispatchEvent(new Event('paste'));
expect(insertLink).toHaveBeenCalledWith('text', url);
});
});
```
9. Ran tests with `npm test`
However, when running `npm test`, I got some errors:
```
~~/mnt/storage/Personal/Documents/code/js/test~~
~~❯ npm test~~
> test@1.0.0 test
> jest
FAIL src/index.test.ts
● Test suite failed to run
~~src/index.test.ts:21:22 - error TS2339: Property 'writeText' does not exist on type '{ new (): Clipboard; prototype: Clipboard; }'.~~
~~21 expect(Clipboard.writeText).toHaveBeenCalledWith(selectedText);~~
~~~~~~~~~
~~src/index.test.ts:31:15 - error TS2339: Property 'clipboardText' does not exist on type '{ new (): Clipboard; prototype: Clipboard; }'.~~
~~31 Clipboard.clipboardText = url;~~
~~~~~~~~~~~~~
~~src/index.test.ts:35:34 - error TS2339: Property 'readText' does not exist on type '{ new (): Clipboard; prototype: Clipboard; }'.~~
~~35 const pasted = Clipboard.readText();~~
~~~~~~~~
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
~~Time: 2.11 s~~
Ran all test suites.
```
~~How can I mock the clipboard and fix the issues?~~

# How to implement automatic text-to-link conversion in TypeScript?
I'm trying to create an automatic text-to-link conversion feature in a JavaScript application. The desired workflow is:
1. Copy a URL to the clipboard
2. Select some text
3. Paste the URL - this should convert the selected text into a link pointing to the pasted URL
For example:
```
Selected text: "Click here"
Pasted URL: "https://www.example.com"
Returns: [Click here](https://www.example.com)
```
This allows easily creating links on the fly without typing Markdown syntax manually.
I tried implementing this in a TypeScript project with the following code:
```ts
let selectedText = '';
document.addEventListener('copy', e => {
const selection = window.getSelection();
if (selection) {
selectedText = selection.toString();
}
});
document.addEventListener('paste', e => {
if (e.clipboardData) {
const pasted = e.clipboardData.getData('text');
if (isValidUrl(pasted)) {
e.preventDefault();
insertLink(selectedText, pasted);
}
}
});
function insertLink(text: string, url: string): void {
document.execCommand('insertHTML', false, `[${text}](${url})`);
}
function isValidUrl(url: string): boolean {
try {
new URL(url);
return true;
} catch (err) {
return false;
}
}
```
To test this code, I set up a TypeScript project on Manjaro Linux and configured Jest for testing:
1. Installed Node.js and npm using `pacman`
2. Created a new TS project with `npm init -y`
3. Installed TypeScript with `npm install --save-dev typescript`
4. Added a `tsconfig.json` file with `npx tsc --init`
5. Installed Jest, ts-jest, and @types/jest packages with `npm install --save-dev jest ts-jest @types/jest`
6. Added jest.config.js for configuration
```
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
};
```
7. Added test script to package.json
8. Wrote the code in `src/index.ts` and test cases in `src/index.test.ts`
```ts
// src/index.test.ts
import { Clipboard } from './mocks/clipboard';
describe('copy handler', () => {
it('copies selected text to clipboard', () => {
const selectedText = 'hello';
window.getSelection = () => {
return {
toString: () => selectedText
} as unknown as Selection;
};
document.addEventListener('copy', e => {
if(e.clipboardData) {
e.clipboardData.setData('text', selectedText);
}
});
document.dispatchEvent(new Event('copy'));
expect(Clipboard.prototype.writeText).toHaveBeenCalledWith(selectedText);
});
});
describe('paste handler', () => {
it('inserts link on valid url paste', () => {
const url = 'https://example.com';
Clipboard.prototype.clipboardText = url;
document.addEventListener('paste', e => {
if(e.clipboardData) {
const pasted = Clipboard.prototype.readText();
if(isValidUrl(pasted)) {
insertLink('text', pasted);
}
}
});
document.dispatchEvent(new Event('paste'));
expect(insertLink).toHaveBeenCalledWith('text', url);
});
});
```
```ts
// src/mocks/clipboard.ts
export class Clipboard {
public static prototype = {
writeText: jest.fn(),
readText: jest.fn(),
clipboardText: ''
};
}
```
9. Ran tests with `npm test`
However, when running `npm test`, I got some errors:
```
> test@1.0.0 test
> jest
FAIL src/index.test.ts
● Test suite failed to run
src/index.test.ts:25:32 - error TS2339: Property 'writeText' does not exist on type 'Clipboard'.
25 expect(Clipboard.prototype.writeText).toHaveBeenCalledWith(selectedText);
~~~~~~~~~
src/index.test.ts:35:25 - error TS2339: Property 'clipboardText' does not exist on type 'Clipboard'.
35 Clipboard.prototype.clipboardText = url;
~~~~~~~~~~~~~
src/index.test.ts:39:44 - error TS2339: Property 'readText' does not exist on type 'Clipboard'.
39 const pasted = Clipboard.prototype.readText();
~~~~~~~~
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 2.056 s
Ran all test suites.
```
How can I fix the errors and properly mock the clipboard in my tests?

#7: Post edited by

ShadowsRanger‭ · 2023-09-06T11:39:47Z (about 1 year ago)

Copy Link

Raw

Markdown

I'm trying to create an automatic text-to-link conversion feature in a JavaScript application. The desired workflow is:
1. Copy a URL to the clipboard
2. Select some text
3. Paste the URL - this should convert the selected text into a link pointing to the pasted URL
For example:
```
Selected text: "Click here"
Pasted URL: "https://www.example.com"
Returns: [Click here](https://www.example.com)
```
This allows easily creating links on the fly without typing Markdown syntax manually.
I tried implementing this in a TypeScript project with the following code:
```typescript
~~// Store selected text~~
let selectedText = '';
document.addEventListener('copy', e => {
~~selectedText = window.getSelection().toString();~~
})
document.addEventListener('paste', e => {
~~const pasted = e.clipboardData.getData('text');~~
~~if(isValidUrl(pasted)) {~~
~~e.preventDefault();~~
~~insertLink(selectedText, pasted);~~
}
});
~~function insertLink(text, url) {~~
document.execCommand('insertHTML', false, `[${text}](${url})`);
}
```
To test this code, I set up a TypeScript project on Manjaro Linux and configured Jest for testing:
1. Installed Node.js and npm using `pacman`
2. Created a new TS project with `npm init -y`
3. Installed TypeScript with `npm install --save-dev typescript`
4. Added a `tsconfig.json` file with `npx tsc --init`
5. Installed Jest, ts-jest, and @types/jest packages with `npm install --save-dev jest ts-jest @types/jest`
6. Added jest.config.js for configuration
```
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
};
```
7. Added test script to package.json
8. Wrote the code in `src/index.ts` and test cases in `src/index.test.ts`
```
~~// test data~~
~~const validUrl = 'https://example.com';~~
~~const invalidUrl = 'not a url';~~
~~const selectedText = 'selected text';~~
describe('insertLink', () => {
~~it('should insert markdown link', () => {~~
~~document.execCommand = jest.fn();~~
~~insertLink(selectedText, validUrl);~~
~~expect(document.execCommand).toHaveBeenCalledWith(~~
~~'insertHTML',~~
~~false,~~
~~`[${selectedText}](${validUrl})`~~
);
~~});~~
~~});~~
~~describe('paste handler', () => {~~
~~it('should insert link on valid url paste', () => {~~
~~const preventDefault = jest.fn();~~
~~const execCommand = jest.fn();~~
~~document.execCommand = execCommand;~~
const e = {
clipboardData: {
~~getData: () => validUrl~~
},
~~preventDefault~~
~~} as ClipboardEvent;~~
~~document.addEventListener('paste', e => {~~
const pasted = e.clipboardData.getData('text');
if(isValidUrl(pasted)) {
~~e.preventDefault();~~
insertLink(selectedText, pasted);
}
});
expect(preventDefault).toHaveBeenCalled();
~~expect(execCommand).toHaveBeenCalledWith(~~
'insertHTML', false, `[${selectedText}](${validUrl})`
);
});
it('should not insert link on invalid url paste', () => {
const preventDefault = jest.fn();
~~const execCommand = jest.fn();~~
document.execCommand = execCommand;
~~const e = {~~
~~clipboardData: {~~
~~getData: () => invalidUrl~~
},
~~preventDefault~~
} as ClipboardEvent;
document.addEventListener('paste', e => {
~~const pasted = e.clipboardData.getData('text');~~
~~if(isValidUrl(pasted)) {~~
~~e.preventDefault();~~
~~insertLink(selectedText, pasted);~~
}
});
expect(preventDefault).not.toHaveBeenCalled();
~~expect(execCommand).not.toHaveBeenCalled();~~
});
});
```
9. Ran tests with `npm test`
However, when running `npm test`, I got some errors:
```
~~Test suite failed to run~~
Cannot redeclare block-scoped variable 'selectedText'.
Conversion of type '{ clipboardData: { getData: () => string; }; preventDefault: jest.Mock<any, any, any>; }' to type 'ClipboardEvent' may be a mistake because neither type sufficiently overlaps with the other.
'e.clipboardData' is possibly 'null'.
~~Cannot find name 'isValidUrl'. Did you mean 'validUrl'?~~
```
How can I mock the clipboard and fix the issues?

I'm trying to create an automatic text-to-link conversion feature in a JavaScript application. The desired workflow is:
1. Copy a URL to the clipboard
2. Select some text
3. Paste the URL - this should convert the selected text into a link pointing to the pasted URL
For example:
```
Selected text: "Click here"
Pasted URL: "https://www.example.com"
Returns: [Click here](https://www.example.com)
```
This allows easily creating links on the fly without typing Markdown syntax manually.
I tried implementing this in a TypeScript project with the following code:
```typescript
let selectedText = '';
document.addEventListener('copy', e => {
const selection = window.getSelection();
if (selection) {
selectedText = selection.toString();
}
});
document.addEventListener('paste', e => {
if (e.clipboardData) {
const pasted = e.clipboardData.getData('text');
if (isValidUrl(pasted)) {
e.preventDefault();
insertLink(selectedText, pasted);
}
}
});
function insertLink(text: string, url: string): void {
document.execCommand('insertHTML', false, `[${text}](${url})`);
}
function isValidUrl(url: string): boolean {
try {
new URL(url);
return true;
} catch (err) {
return false;
}
}
```
To test this code, I set up a TypeScript project on Manjaro Linux and configured Jest for testing:
1. Installed Node.js and npm using `pacman`
2. Created a new TS project with `npm init -y`
3. Installed TypeScript with `npm install --save-dev typescript`
4. Added a `tsconfig.json` file with `npx tsc --init`
5. Installed Jest, ts-jest, and @types/jest packages with `npm install --save-dev jest ts-jest @types/jest`
6. Added jest.config.js for configuration
```
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
};
```
7. Added test script to package.json
8. Wrote the code in `src/index.ts` and test cases in `src/index.test.ts`
```
describe('copy handler', () => {
it('copies selected text to clipboard', () => {
const selectedText = 'hello';
window.getSelection = () => {
return {
toString: () => selectedText
} as unknown as Selection;
};
document.addEventListener('copy', e => {
if(e.clipboardData) {
e.clipboardData.setData('text', selectedText);
}
});
document.dispatchEvent(new Event('copy'));
expect(Clipboard.writeText).toHaveBeenCalledWith(selectedText);
});
});
describe('paste handler', () => {
it('inserts link on valid url paste', () => {
const url = 'https://example.com';
Clipboard.clipboardText = url;
document.addEventListener('paste', e => {
if(e.clipboardData) {
const pasted = Clipboard.readText();
if(isValidUrl(pasted)) {
insertLink('text', pasted);
}
}
});
document.dispatchEvent(new Event('paste'));
expect(insertLink).toHaveBeenCalledWith('text', url);
});
});
```
9. Ran tests with `npm test`
However, when running `npm test`, I got some errors:
```
/mnt/storage/Personal/Documents/code/js/test
❯ npm test
> test@1.0.0 test
> jest
FAIL src/index.test.ts
● Test suite failed to run
src/index.test.ts:21:22 - error TS2339: Property 'writeText' does not exist on type '{ new (): Clipboard; prototype: Clipboard; }'.
21 expect(Clipboard.writeText).toHaveBeenCalledWith(selectedText);
~~~~~~~~~
src/index.test.ts:31:15 - error TS2339: Property 'clipboardText' does not exist on type '{ new (): Clipboard; prototype: Clipboard; }'.
31 Clipboard.clipboardText = url;
~~~~~~~~~~~~~
src/index.test.ts:35:34 - error TS2339: Property 'readText' does not exist on type '{ new (): Clipboard; prototype: Clipboard; }'.
35 const pasted = Clipboard.readText();
~~~~~~~~
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 2.11 s
Ran all test suites.
```
How can I mock the clipboard and fix the issues?

#6: Post edited by

ShadowsRanger‭ · 2023-09-06T11:18:55Z (about 1 year ago)

Copy Link

Raw

Markdown

I'm trying to create an automatic text-to-link conversion feature in a JavaScript application. The desired workflow is:
1. Copy a URL to the clipboard
2. Select some text
3. Paste the URL - this should convert the selected text into a link pointing to the pasted URL
For example:
```
Selected text: "Click here"
Pasted URL: "https://www.example.com"
Returns: [Click here](https://www.example.com)
```
This allows easily creating links on the fly without typing Markdown syntax manually.
I tried implementing this in a TypeScript project with the following code:
```typescript
// Store selected text
let selectedText = '';
document.addEventListener('copy', e => {
selectedText = window.getSelection().toString();
})
document.addEventListener('paste', e => {
const pasted = e.clipboardData.getData('text');
if(isValidUrl(pasted)) {
e.preventDefault();
insertLink(selectedText, pasted);
}
});
function insertLink(text, url) {
document.execCommand('insertHTML', false, `[${text}](${url})`);
}
```
To test this code, I set up a TypeScript project on Manjaro Linux and configured Jest for testing:
1. Installed Node.js and npm using `pacman`
2. Created a new TS project with `npm init -y`
3. Installed TypeScript with `npm install --save-dev typescript`
4. Added a `tsconfig.json` file with `npx tsc --init`
5. Installed Jest, ts-jest, and @types/jest packages with `npm install --save-dev jest ts-jest @types/jest`
6. Added jest.config.js for configuration
```
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
};
```
7. Added test script to package.json
8. Wrote the code in `src/index.ts` and test cases in `src/index.test.ts`
```
// test data
const validUrl = 'https://example.com';
const invalidUrl = 'not a url';
const selectedText = 'selected text';
describe('insertLink', () => {
it('should insert markdown link', () => {
document.execCommand = jest.fn();
insertLink(selectedText, validUrl);
expect(document.execCommand).toHaveBeenCalledWith(
'insertHTML',
false,
`[${selectedText}](${validUrl})`
);
});
});
describe('paste handler', () => {
it('should insert link on valid url paste', () => {
const preventDefault = jest.fn();
const execCommand = jest.fn();
document.execCommand = execCommand;
const e = {
clipboardData: {
getData: () => validUrl
},
preventDefault
} as ClipboardEvent;
document.addEventListener('paste', e => {
const pasted = e.clipboardData.getData('text');
if(isValidUrl(pasted)) {
e.preventDefault();
insertLink(selectedText, pasted);
}
});
expect(preventDefault).toHaveBeenCalled();
expect(execCommand).toHaveBeenCalledWith(
'insertHTML', false, `[${selectedText}](${validUrl})`
);
});
it('should not insert link on invalid url paste', () => {
const preventDefault = jest.fn();
const execCommand = jest.fn();
document.execCommand = execCommand;
const e = {
clipboardData: {
getData: () => invalidUrl
},
preventDefault
} as ClipboardEvent;
document.addEventListener('paste', e => {
const pasted = e.clipboardData.getData('text');
if(isValidUrl(pasted)) {
e.preventDefault();
insertLink(selectedText, pasted);
}
});
expect(preventDefault).not.toHaveBeenCalled();
expect(execCommand).not.toHaveBeenCalled();
});
});
```
9. Ran tests with `npm test`
However, when running `npm test`, I got some errors:
```
Test suite failed to run
Cannot redeclare block-scoped variable 'selectedText'.
Conversion of type '{ clipboardData: { getData: () => string; }; preventDefault: jest.Mock<any, any, any>; }' to type 'ClipboardEvent' may be a mistake because neither type sufficiently overlaps with the other.
'e.clipboardData' is possibly 'null'.
Cannot find name 'isValidUrl'. Did you mean 'validUrl'?
```
~~How can I fix this code and tests?~~

I'm trying to create an automatic text-to-link conversion feature in a JavaScript application. The desired workflow is:
1. Copy a URL to the clipboard
2. Select some text
3. Paste the URL - this should convert the selected text into a link pointing to the pasted URL
For example:
```
Selected text: "Click here"
Pasted URL: "https://www.example.com"
Returns: [Click here](https://www.example.com)
```
This allows easily creating links on the fly without typing Markdown syntax manually.
I tried implementing this in a TypeScript project with the following code:
```typescript
// Store selected text
let selectedText = '';
document.addEventListener('copy', e => {
selectedText = window.getSelection().toString();
})
document.addEventListener('paste', e => {
const pasted = e.clipboardData.getData('text');
if(isValidUrl(pasted)) {
e.preventDefault();
insertLink(selectedText, pasted);
}
});
function insertLink(text, url) {
document.execCommand('insertHTML', false, `[${text}](${url})`);
}
```
To test this code, I set up a TypeScript project on Manjaro Linux and configured Jest for testing:
1. Installed Node.js and npm using `pacman`
2. Created a new TS project with `npm init -y`
3. Installed TypeScript with `npm install --save-dev typescript`
4. Added a `tsconfig.json` file with `npx tsc --init`
5. Installed Jest, ts-jest, and @types/jest packages with `npm install --save-dev jest ts-jest @types/jest`
6. Added jest.config.js for configuration
```
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
};
```
7. Added test script to package.json
8. Wrote the code in `src/index.ts` and test cases in `src/index.test.ts`
```
// test data
const validUrl = 'https://example.com';
const invalidUrl = 'not a url';
const selectedText = 'selected text';
describe('insertLink', () => {
it('should insert markdown link', () => {
document.execCommand = jest.fn();
insertLink(selectedText, validUrl);
expect(document.execCommand).toHaveBeenCalledWith(
'insertHTML',
false,
`[${selectedText}](${validUrl})`
);
});
});
describe('paste handler', () => {
it('should insert link on valid url paste', () => {
const preventDefault = jest.fn();
const execCommand = jest.fn();
document.execCommand = execCommand;
const e = {
clipboardData: {
getData: () => validUrl
},
preventDefault
} as ClipboardEvent;
document.addEventListener('paste', e => {
const pasted = e.clipboardData.getData('text');
if(isValidUrl(pasted)) {
e.preventDefault();
insertLink(selectedText, pasted);
}
});
expect(preventDefault).toHaveBeenCalled();
expect(execCommand).toHaveBeenCalledWith(
'insertHTML', false, `[${selectedText}](${validUrl})`
);
});
it('should not insert link on invalid url paste', () => {
const preventDefault = jest.fn();
const execCommand = jest.fn();
document.execCommand = execCommand;
const e = {
clipboardData: {
getData: () => invalidUrl
},
preventDefault
} as ClipboardEvent;
document.addEventListener('paste', e => {
const pasted = e.clipboardData.getData('text');
if(isValidUrl(pasted)) {
e.preventDefault();
insertLink(selectedText, pasted);
}
});
expect(preventDefault).not.toHaveBeenCalled();
expect(execCommand).not.toHaveBeenCalled();
});
});
```
9. Ran tests with `npm test`
However, when running `npm test`, I got some errors:
```
Test suite failed to run
Cannot redeclare block-scoped variable 'selectedText'.
Conversion of type '{ clipboardData: { getData: () => string; }; preventDefault: jest.Mock<any, any, any>; }' to type 'ClipboardEvent' may be a mistake because neither type sufficiently overlaps with the other.
'e.clipboardData' is possibly 'null'.
Cannot find name 'isValidUrl'. Did you mean 'validUrl'?
```
How can I mock the clipboard and fix the issues?

typescript markdown hyperlink

typescript mocking markdown hyperlink

#5: Post edited by

ShadowsRanger‭ · 2023-09-06T11:15:24Z (about 1 year ago)

Copy Link

Raw

Markdown

~~How to implement automatic text-to-link conversion in JavaScript?~~

How to implement automatic text-to-link conversion in TypeScript?

I'm trying to create an automatic text-to-link conversion feature in a JavaScript application. The desired workflow is:
1. Copy a URL to the clipboard
2. Select some text
3. Paste the URL - this should convert the selected text into a link pointing to the pasted URL
For example:
```
~~Selected text: "Click here"~~
Pasted URL: "https://www.example.com"
Returns: [Click here](https://www.example.com)
```
This allows easily creating links on the fly without typing Markdown syntax manually.
~~I tried implementing this with the following code:~~
~~```js~~
~~// Store selected text~~
let selectedText = '';
document.addEventListener('copy', e => {
~~selectedText = window.getSelection().toString();~~
})
document.addEventListener('paste', e => {
~~const pasted = e.clipboardData.getData('text');~~
if(isValidUrl(pasted)) {
~~e.preventDefault();~~
insertLink(selectedText, pasted);
}
});
function insertLink(text, url) {
~~document.execCommand('insertHTML', false, `[${text}](${url})`);~~
}
```
~~This seems to work in basic tests, but I'm wondering if there are any issues I'm missing or better ways to implement this feature? Is this a reasonable approach?~~

I'm trying to create an automatic text-to-link conversion feature in a JavaScript application. The desired workflow is:
1. Copy a URL to the clipboard
2. Select some text
3. Paste the URL - this should convert the selected text into a link pointing to the pasted URL
For example:
```
Selected text: "Click here"
Pasted URL: "https://www.example.com"
Returns: [Click here](https://www.example.com)
```
This allows easily creating links on the fly without typing Markdown syntax manually.
I tried implementing this in a TypeScript project with the following code:
```typescript
// Store selected text
let selectedText = '';
document.addEventListener('copy', e => {
selectedText = window.getSelection().toString();
})
document.addEventListener('paste', e => {
const pasted = e.clipboardData.getData('text');
if(isValidUrl(pasted)) {
e.preventDefault();
insertLink(selectedText, pasted);
}
});
function insertLink(text, url) {
document.execCommand('insertHTML', false, `[${text}](${url})`);
}
```
To test this code, I set up a TypeScript project on Manjaro Linux and configured Jest for testing:
1. Installed Node.js and npm using `pacman`
2. Created a new TS project with `npm init -y`
3. Installed TypeScript with `npm install --save-dev typescript`
4. Added a `tsconfig.json` file with `npx tsc --init`
5. Installed Jest, ts-jest, and @types/jest packages with `npm install --save-dev jest ts-jest @types/jest`
6. Added jest.config.js for configuration
```
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
};
```
7. Added test script to package.json
8. Wrote the code in `src/index.ts` and test cases in `src/index.test.ts`
```
// test data
const validUrl = 'https://example.com';
const invalidUrl = 'not a url';
const selectedText = 'selected text';
describe('insertLink', () => {
it('should insert markdown link', () => {
document.execCommand = jest.fn();
insertLink(selectedText, validUrl);
expect(document.execCommand).toHaveBeenCalledWith(
'insertHTML',
false,
`[${selectedText}](${validUrl})`
);
});
});
describe('paste handler', () => {
it('should insert link on valid url paste', () => {
const preventDefault = jest.fn();
const execCommand = jest.fn();
document.execCommand = execCommand;
const e = {
clipboardData: {
getData: () => validUrl
},
preventDefault
} as ClipboardEvent;
document.addEventListener('paste', e => {
const pasted = e.clipboardData.getData('text');
if(isValidUrl(pasted)) {
e.preventDefault();
insertLink(selectedText, pasted);
}
});
expect(preventDefault).toHaveBeenCalled();
expect(execCommand).toHaveBeenCalledWith(
'insertHTML', false, `[${selectedText}](${validUrl})`
);
});
it('should not insert link on invalid url paste', () => {
const preventDefault = jest.fn();
const execCommand = jest.fn();
document.execCommand = execCommand;
const e = {
clipboardData: {
getData: () => invalidUrl
},
preventDefault
} as ClipboardEvent;
document.addEventListener('paste', e => {
const pasted = e.clipboardData.getData('text');
if(isValidUrl(pasted)) {
e.preventDefault();
insertLink(selectedText, pasted);
}
});
expect(preventDefault).not.toHaveBeenCalled();
expect(execCommand).not.toHaveBeenCalled();
});
});
```
9. Ran tests with `npm test`
However, when running `npm test`, I got some errors:
```
Test suite failed to run
Cannot redeclare block-scoped variable 'selectedText'.
Conversion of type '{ clipboardData: { getData: () => string; }; preventDefault: jest.Mock<any, any, any>; }' to type 'ClipboardEvent' may be a mistake because neither type sufficiently overlaps with the other.
'e.clipboardData' is possibly 'null'.
Cannot find name 'isValidUrl'. Did you mean 'validUrl'?
```
How can I fix this code and tests?

javascript typescript markdown hyperlink

typescript markdown hyperlink

#4: Post edited by

ShadowsRanger‭ · 2023-09-06T06:19:55Z (about 1 year ago)

Copy Link

Raw

Markdown

Automatic text-to-link formatting when pasting

How to implement automatic text-to-link conversion in JavaScript?

I'm looking for some help implementing an intelligent text-to-link conversion feature in Markdown.
~~The ideal workflow would be:~~
1. Copy the desired URL
2. Select the text you want to make into a link
~~3. Paste the URL. The system would then automatically turn the selected text into a hyperlink pointing to the pasted URL.~~
For example:
```
~~Selected text: "Click here"~~
Pasted URL: "https://www.example.com"
Returns: [Click here](https://www.example.com)
```
Rather than needing to manually type Markdown link syntax, this would allow seamlessly creating links on the fly.
Here's a simple approach I tried in JavaScript:
~~```js~~
~~function createSmartLink(text, url) {~~
~~return `[${text}](${url})`;~~
}
~~```~~
~~What's this feature usually called? What's the best way to implement this feature using the clipboard content?~~
~~Would this be correct?~~
```js
// Store selected text
let selectedText = '';
document.addEventListener('copy', e => {
selectedText = window.getSelection().toString();
})
document.addEventListener('paste', e => {
const pasted = e.clipboardData.getData('text');
~~if(isValidUrl(pasted)) {~~
~~e.preventDefault();~~
insertLink(selectedText, pasted);
}
});
function insertLink(text, url) {
~~document.execCommand('insertHTML', false, `[${text}](${url})`);~~
}
~~```~~

I'm trying to create an automatic text-to-link conversion feature in a JavaScript application. The desired workflow is:
1. Copy a URL to the clipboard
2. Select some text
3. Paste the URL - this should convert the selected text into a link pointing to the pasted URL
For example:
```
Selected text: "Click here"
Pasted URL: "https://www.example.com"
Returns: [Click here](https://www.example.com)
```
This allows easily creating links on the fly without typing Markdown syntax manually.
I tried implementing this with the following code:
```js
// Store selected text
let selectedText = '';
document.addEventListener('copy', e => {
selectedText = window.getSelection().toString();
})
document.addEventListener('paste', e => {
const pasted = e.clipboardData.getData('text');
if(isValidUrl(pasted)) {
e.preventDefault();
insertLink(selectedText, pasted);
}
});
function insertLink(text, url) {
document.execCommand('insertHTML', false, `[${text}](${url})`);
}
```
This seems to work in basic tests, but I'm wondering if there are any issues I'm missing or better ways to implement this feature? Is this a reasonable approach?

#3: Post edited by

ShadowsRanger‭ · 2023-09-05T11:56:48Z (about 1 year ago)

Copy Link

Raw

Markdown

I'm looking for some help implementing an intelligent text-to-link conversion feature in Markdown.
The ideal workflow would be:
1. Copy the desired URL
2. Select the text you want to make into a link
3. Paste the URL. The system would then automatically turn the selected text into a hyperlink pointing to the pasted URL.
For example:
```
Selected text: "Click here"
Pasted URL: "https://www.example.com"
Returns: [Click here](https://www.example.com)
```
Rather than needing to manually type Markdown link syntax, this would allow seamlessly creating links on the fly.
Here's a simple approach I tried in JavaScript:
```js
function createSmartLink(text, url) {
return `[${text}](${url})`;
}
```
~~What's this feature usually called? What's the best way to implement this feature using the clipboard content?~~

I'm looking for some help implementing an intelligent text-to-link conversion feature in Markdown.
The ideal workflow would be:
1. Copy the desired URL
2. Select the text you want to make into a link
3. Paste the URL. The system would then automatically turn the selected text into a hyperlink pointing to the pasted URL.
For example:
```
Selected text: "Click here"
Pasted URL: "https://www.example.com"
Returns: [Click here](https://www.example.com)
```
Rather than needing to manually type Markdown link syntax, this would allow seamlessly creating links on the fly.
Here's a simple approach I tried in JavaScript:
```js
function createSmartLink(text, url) {
return `[${text}](${url})`;
}
```
What's this feature usually called? What's the best way to implement this feature using the clipboard content?
Would this be correct?
```js
// Store selected text
let selectedText = '';
document.addEventListener('copy', e => {
selectedText = window.getSelection().toString();
})
document.addEventListener('paste', e => {
const pasted = e.clipboardData.getData('text');
if(isValidUrl(pasted)) {
e.preventDefault();
insertLink(selectedText, pasted);
}
});
function insertLink(text, url) {
document.execCommand('insertHTML', false, `[${text}](${url})`);
}
```

#2: Post edited by

ShadowsRanger‭ · 2023-09-05T11:46:38Z (about 1 year ago)

Copy Link

Raw

Markdown

I'm looking for some help implementing an intelligent text-to-link conversion feature in Markdown.
The ideal workflow would be:
1. Copy the desired URL
2. Select the text you want to make into a link
3. Paste the URL. The system would then automatically turn the selected text into a hyperlink pointing to the pasted URL.
For example:
```
Selected text: "Click here"
Pasted URL: "https://www.example.com"
Returns: [Click here](https://www.example.com)
```
Rather than needing to manually type Markdown link syntax, this would allow seamlessly creating links on the fly.
Here's a simple approach I tried in JavaScript:
```js
function createSmartLink(text, url) {
return `[${text}](${url})`;
}
```
~~What's this feature usually called? What's the best way to implement this feature using the clipboard content?~~
~~Tags:~~
-
~~- links~~
~~- javascript~~
~~- text-formatting~~

I'm looking for some help implementing an intelligent text-to-link conversion feature in Markdown.
The ideal workflow would be:
1. Copy the desired URL
2. Select the text you want to make into a link
3. Paste the URL. The system would then automatically turn the selected text into a hyperlink pointing to the pasted URL.
For example:
```
Selected text: "Click here"
Pasted URL: "https://www.example.com"
Returns: [Click here](https://www.example.com)
```
Rather than needing to manually type Markdown link syntax, this would allow seamlessly creating links on the fly.
Here's a simple approach I tried in JavaScript:
```js
function createSmartLink(text, url) {
return `[${text}](${url})`;
}
```
What's this feature usually called? What's the best way to implement this feature using the clipboard content?

#1: Initial revision by

ShadowsRanger‭ · 2023-09-05T11:46:21Z (about 1 year ago)

Copy Link

Raw

Markdown

Automatic text-to-link formatting when pasting

I'm looking for some help implementing an intelligent text-to-link conversion feature in Markdown.

The ideal workflow would be:

1. Copy the desired URL
2. Select the text you want to make into a link
3. Paste the URL. The system would then automatically turn the selected text into a hyperlink pointing to the pasted URL.

For example:

```
Selected text: "Click here"  
Pasted URL: "https://www.example.com"

Returns: [Click here](https://www.example.com)
```

Rather than needing to manually type Markdown link syntax, this would allow seamlessly creating links on the fly. 

Here's a simple approach I tried in JavaScript:

```js
function createSmartLink(text, url) {
  return `[${text}](${url})`; 
}
```

What's this feature usually called? What's the best way to implement this feature using the clipboard content?

Tags:

- 
- links
- javascript
- text-formatting

javascript typescript markdown hyperlink

Communities

Post History