Copy and Paste ContentEditable
HTML
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.0/angular.min.js">
</script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/ngLocalStorage.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"></link>
<div ng-app="TodoApp" ng-controller="TodoController" class="task-list _wrap centered max-width text-center-h ng-scope"style="font-family: Arial, sans-serif;">
<h1 style="font-family: Arial, sans-serif;">Notes:</h1>
<div class="block-justify" style="position: relative; left: -153px; top: -14px;">
<div class="totals _wrap text-left">
<div class="totals _detail">
</div>
</div>
<div class="search _wrap text-right">
<input class="input -text -search" type="text" placeholder="Search tasks" ng-model="taskSearch.name" />
<i class="fa fa-search"></i>
</div>
</div>
<form class="add-form _wrap block text-left">
<input class="input -text -add-task" type="text" placeholder="Add a new task" ng-model="taskInput.name" ng-model-instant />
<div class="add-form _buttons text-right">
<p>Priority</p>
<div class="add-form _checkbox-wrap">
<label class="add-form _checkbox"><input class="input -checkbox" type="checkbox" name="priority"
ng-model="taskInput.priority" ng-init="checked=false" parse-int ng-true-value="1"
ng-false-value="0"></i></label>
</div>
<button class="add-form _submit-button btn -add" ng-click="todoAdd()" style="position: relative; left: 18px; top: -3px; height: 47px; transform-origin: 50% 78%;">Add</button>
</div>
</form>
<ul class="list-no-style text-left">
<li ng-repeat="task in tasksActive | filter:taskSearch.name | orderBy:'-priority'"
class="task _item -done-{{ task.complete }} -task-priority-{{...
CSS
*,
*:before,
*:after {
box-sizing: border-box;
}
.max-width {
max-width: 600px;
}
.centered {
margin: auto;
}
.text-center-h {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.list-no-style {
list-style: none outside none;
padding-left: 0;
}
html,
body {
width: 100%;
min-height: 100%;
color: #333;
padding: 20px 20px 20px 10px;
}
html {
font-size: 10px;
}
body {
font-size: 1.6rem;
background: linear-gradient(45deg, #bbdefb 0%, #311b92 100%);
}
p {
white-space: pre-wrap;
margin: 1em;
color: #777;
}
.block {
font-size: 0;
margin-bottom: 24px;
}
.block>* {
font-size: medium;
display: inline-block;
vertical-align: top;
}
.block-justify {
text-align: justify;
}
.block-justify:after {
content: '';
display: inline-block;
width: 100%;
}
.block-justify>* {
display: inline-block;
vertical-align: top;
}
.block-table {
display: table;
table-layout: fixed;
width: 100%;
}
.block-table>* {
display: table-cell;
}
.fa {
font-size: 2rem;
color: #bbb;
padding: 0 6px;
transition: color 0.2s ease;
}
.fa.-clickable {
cursor: pointer;
}
button.-add,
.btn.-add {
border: none;
padding: 5px 0 0;
border-bottom: 3px solid #0eb2f0;
background: #56c9f5;
transition: all 0.1s ease;
}
button.-add:hover,
.btn.-add:hover {
background: #6ed1f6;
}
button.-add:active,
.btn.-add:active {
border-bottom-width: 1px;
}
button.-clear,
.btn.-clear {
border: none;
padding: 0;
background: none;
color: #bbb;
}
button.-clear:hover,
.btn.-clear:hover {
color: tomato;
}
.task-list._wrap {
background: #fff;
padding: 20px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 18px 18px 0 0 #56c9f5;
}
.task-list._wrap h1 {
font-size: 5rem;
}
.totals._wrap,
.search {
vertical-align: bottom;
}
.totals._wrap {
font-size: 0;
}
.totals._grand-total,
.totals._detail {
display: inline-block;
vertical-align: top;
font-size:...
JavaScript
var app = angular.module("TodoApp", ["LocalStorageModule", 'ngSanitize']);
app.controller("TodoController", function ($scope, localStorageService) {
if (!localStorageService.get("taskListActive")) {
$scope.tasksActive = [{
text: "Do me next",
priority: 1,
complete: false
},
{
text: "I'm not important",
priority: 0,
complete: false
}
];
} else {
$scope.tasksActive = localStorageService.get("taskListActive");
}
if (!localStorageService.get("taskListComplete")) {
$scope.tasksComplete = [{
text: "I'm already done",
priority: 0,
complete: true
}];
} else {
$scope.tasksComplete = localStorageService.get("taskListComplete");
}
$scope.totalTasks = function () {
console.log($scope.tasksComplete.length);
return $scope.tasksActive.length + $scope.tasksComplete.length;
};
$scope.totalRemaining = function () {
return $scope.tasksActive.length;
};
$scope.totalComplete = function () {
return $scope.tasksActive.length;
};
$scope.todoAdd = function () {
if ($scope.taskInput.name) {
console.log($scope.taskInput.name, 'veamos')
$scope.tasksActive.unshift({
text: $scope.taskInput.name,
priority: $scope.taskInput.priority || 0,
complete: false
});
$scope.taskInput.name = "";
$scope.taskInput.priority = 0;
}
};
$scope.togglePriority = function (task) {
if (task.priority === 0) {
task.priority = 1;
console.log("a");
} else {
task.priority = 0;
}
};
$scope.completeTask = function (task) {
//var task = $scope.tasksActive[index];
task.complete = true;
task.priority = 0;
$scope.tasksActive.splice($scope.tasksActive.indexOf(task), 1);
$scope.tasksComplete.unshift(task);
};
$scope.uncompleteTask = function (task) {
task.complete = false;
$scope.tasksComplete.splice($scope.tasksComplete.indexOf(task), 1);
$scope.tasksActive.unshift(task);
};
$scope.deleteTask = function (task, list) {
if (list == "active")...